3 replies to this topic

[Xslc703X]

I am trying to code a page where i have a bunch of images and under the image is text that says unclicked. When you click each image it will say clicked. Below that table is another table that has an input field with a submit button. But, the submit button and the unpit field are unusable(not sure if that is a word) until all the images have been clicked. Does anyone have an idea of how to code it? There is also individual ID's involved.

[Demonslay]

Simple really. Here's a filed test I'll just make off the top of my head.

<script type="text/javascript">
document.getElementById('submit_input').disabled = true;
document.getElementById('text_input').disabled = true;

function toggle(id){
  textNode = document.getElementById('text'+id);
  textNode.innerHTML = (textNode == 'unclicked') ? 'clicked' : 'unclicked';
  check_clicked();
}

function check_clicked(){
  for(i = 1; i <= 3; i++){
    if(document.getElementById('text'+i).innerHTML == 'unclicked')
      return;
  }
  document.getElementById('submit_input').disabled = false;
  document.getElementById('text_input').disabled = false;
}
</script>

<a onclick="toggle(1);"><img src="image1.jpg" id="image1" alt="" /></a>
<div id="text1">unclicked</div>
<br />
<a onclick="toggle(2);"><img src="image2.jpg" id="image2" alt="" /></a>
<div id="text2">unclicked</div>
<br />
<a onclick="toggle(3);"><img src="image3.jpg" id="image3" alt="" /></a>
<div id="text3">unclicked</div>
<br /><br />
<input type="text" id="text_input" />
<input type="submit" id="submit_input" value="Submit" />

From logic that should work, even if it isn't very flexible or dynamic. If you were to use Prototype, you could expand on it and use another method that would be easier, using the immediateDescendants() method and wrapping all of the images into a div, and iterating over each image to check if it is checked or not.

I'll just show you what that would look like.

<script type="text/javascript">
$('submit_input').disable();
$('text_input').disable();

function toggle(id){
  textNode = $('text'+id);
  textNode.innerHTML = (textNode == 'unclicked') ? 'clicked' : 'unclicked';
  check_clicked();
}

function check_clicked(){
  imageArray = $('image_wrapper').immediateDescendants();
  imageArray.each(function(i){if(i.innerHTML = 'unclicked') return;});
  $('submit_input').enable();
  $('text_input').enable();
}
</script>

<div id="image_wrapper">
<a onclick="toggle(1);"><img src="image1.jpg" id="image1" alt="" /></a>
<div id="text1">unclicked</div>
<br />
<a onclick="toggle(2);"><img src="image2.jpg" id="image2" alt="" /></a>
<div id="text2">unclicked</div>
<br />
<a onclick="toggle(3);"><img src="image3.jpg" id="image3" alt="" /></a>
<div id="text3">unclicked</div>
</div>
<br /><br />
<input type="text" id="text_input" />
<input type="submit" id="submit_input" value="Submit" />

[Xslc703X]

Demonslay, on May 30 2007, 11:47 AM, said:

Simple really. Here's a filed test I'll just make off the top of my head.

<script type="text/javascript">
document.getElementById('submit_input').disabled = true;
document.getElementById('text_input').disabled = true;

function toggle(id){
  textNode = document.getElementById('text'+id);
  textNode.innerHTML = (textNode == 'unclicked') ? 'clicked' : 'unclicked';
  check_clicked();
}

function check_clicked(){
  for(i = 1; i <= 3; i++){
    if(document.getElementById('text'+i).innerHTML == 'unclicked')
      return;
  }
  document.getElementById('submit_input').disabled = false;
  document.getElementById('text_input').disabled = false;
}
</script>

<a onclick="toggle(1);"><img src="image1.jpg" id="image1" alt="" /></a>
<div id="text1">unclicked</div>
<br />
<a onclick="toggle(2);"><img src="image2.jpg" id="image2" alt="" /></a>
<div id="text2">unclicked</div>
<br />
<a onclick="toggle(3);"><img src="image3.jpg" id="image3" alt="" /></a>
<div id="text3">unclicked</div>
<br /><br />
<input type="text" id="text_input" />
<input type="submit" id="submit_input" value="Submit" />

From logic that should work, even if it isn't very flexible or dynamic. If you were to use Prototype, you could expand on it and use another method that would be easier, using the immediateDescendants() method and wrapping all of the images into a div, and iterating over each image to check if it is checked or not.

I'll just show you what that would look like.

<script type="text/javascript">
$('submit_input').disable();
$('text_input').disable();

function toggle(id){
  textNode = $('text'+id);
  textNode.innerHTML = (textNode == 'unclicked') ? 'clicked' : 'unclicked';
  check_clicked();
}

function check_clicked(){
  imageArray = $('image_wrapper').immediateDescendants();
  imageArray.each(function(i){if(i.innerHTML = 'unclicked') return;});
  $('submit_input').enable();
  $('text_input').enable();
}
</script>

<div id="image_wrapper">
<a onclick="toggle(1);"><img src="image1.jpg" id="image1" alt="" /></a>
<div id="text1">unclicked</div>
<br />
<a onclick="toggle(2);"><img src="image2.jpg" id="image2" alt="" /></a>
<div id="text2">unclicked</div>
<br />
<a onclick="toggle(3);"><img src="image3.jpg" id="image3" alt="" /></a>
<div id="text3">unclicked</div>
</div>
<br /><br />
<input type="text" id="text_input" />
<input type="submit" id="submit_input" value="Submit" />

ok yeh that makes sense thank you so much ill give it a try

[Xslc703X]

actually i was browsing through the net and didnt mean too but i found a page that sorta has the same idea of what im looking for..any idea? http://matthewinsane...b.com/index.php
ignore all the dumb mumbo jumbo but how do oyu think they would code something like that...i know part of it has what youve shown me