Newbie Q: Display multiple form elements?

[jjfletch]

Hi all, I just started using JavaScript (as in, today) and I need some help.... Apologies, if this long-winded....

I've figured out how to show/hide form elements based on radio button selections, but am confused.

I have two form questions, the responses to which should pull up two different sections, but they should both display if the answers to each question is yes. The problem I'm having is that it will only display the section based on the most recent response.

For example:

// This question should display the JuiceFan div

Do you like juice?
<input type="radio" name="gd_set_9" value="Love Juice" onClick="hideAll(); 
changeDiv('JuiceFan','block');">Love Juice<br />
<input type="radio" name="gd_set_9" value="Hate Juice" onClick="hideAll();">Hate Juice<br />

// This question should display the MilkFan div

Do you like milk?
<input type="radio" name="gd_set_9" value="Love Milk" onClick="hideAll(); 
changeDiv('MilkFan','block');">Love Milk<br />
<input type="radio" name="gd_set_9" value="Hate Milk" onClick="hideAll();">Hate Milk<br />

If the user selects both "Love Juice" and "Love Milk" both the "JuiceFan" and "MilkFan" divs should display. If I select "Love Juice" the JuiceFan div displays, as it should, but then if I select "Love Milk" the MilkFan div displays but the JuiceFan div disappears. How can I make sure they both display?

Here is the script:

<script type="text/javascript">
<!--
 
function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}
 
function hideAll()
{
  changeDiv("JuiceFan","none");
  changeDiv("MilkFan","none");
}
 
function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>

 

[BillyRayPreachersSon]

Heheh... I'm surprised our web proxy allowed me to view this thread, with terms like "Love juice" peppered all around it ;o)



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jjfletch]

DOH!

Er, um... ::blush:: Totally didn't make the connection when I wrote it.

Can someone help me anyway?

 

[jjfletch]

:: Sigh :: I wish you could edit posts: Here's a rewrite of what I'm looking for:


Hi all, I just started using JavaScript (as in, today) and I need some help.... Apologies, if this long-winded....

I've figured out how to show/hide form elements based on radio button selections, but am confused.

I have two form questions, the responses to which should pull up two different sections, but they should both display if the answers to each question is yes. The problem I'm having is that it will only display the section based on the most recent response.

For example:

Question 1?<br />
<input type="radio" name="gd_set_9" value="ResponseA" onClick="hideAll();
changeDiv('Div_1','block');">ResponseA<br />
<input type="radio" name="gd_set_9" value="ResponseB" onClick="hideAll();
changeDiv('Div_1','block');">ResponseB<br />
<input type="radio" name="gd_set_9" value="ResponseC" onClick="hideAll();">ResponseC<br /> 
<p>
 
Question 2?<br />
<input type="radio" name="gd_set_10" value="ResponseA" onClick="hideAll(); 
changeDiv('Div_2','block');">ResponseA<br />
<input type="radio" name="gd_set_10" value="ResponseB" onClick="hideAll();
changeDiv('Div_2','block');">ResponseB<br />
<input type="radio" name="gd_set_10" value="ResponseC" onClick="hideAll();">ResponseC<br />
<p>

If the user selects "ResponseA" for both questions, then both the "Div_1" and "Div_2" divs should display. If I select "ResponseA" to Question 1, the Div_1 div displays, as it should, but then if I select "ResponseA" to Question 2, the Div_2 div displays but the Div_1 div disappears. How can I make sure they both display?

Here is the script:

<script type="text/javascript">
<!--
 
function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}
 
function hideAll()
{
  changeDiv("Div_1","none");
  changeDiv("Div_2","none");
}
 
function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>

 

[tsuji]

It looks very much have the matter unnecessarily complicated. Just use a simple function to check thing, like this.
[tt]
function check(obj) {
if ((obj.parentNode.id=="Div_1" || obj.parentNode.id=="Div_2") && obj.value=="ResponseA" && obj.checked) {
obj.parentNode.style.display="block";
} else {
obj.parentNode.style.display="none";
}
}
[/tt]
and call it like this.
[tt]
<div id="Div_1">
Question 1?<br />
<input type="radio" name="gd_set_9" value="ResponseA" onClick="check(this)">ResponseA<br />
<input type="radio" name="gd_set_9" value="ResponseB" onClick="check(this)">ResponseB<br />
<input type="radio" name="gd_set_9" value="ResponseC" onClick="check(this)">ResponseC<br />
<p>
</div>
<div id="Div_2">
Question 2?<br />
<input type="radio" name="gd_set_10" value="ResponseA" onClick="check(this)">ResponseA<br />
<input type="radio" name="gd_set_10" value="ResponseB" onClick="check(this)">ResponseB<br />
<input type="radio" name="gd_set_10" value="ResponseC" onClick="check(this)">ResponseC<br />
<p>
</div>
[/tt]