All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button – you get another set below it. Then again, when you click one of the 2nd set of buttons, you’ll get a third etc. Currently I have the following:
<html><head><title>My Wizard</title> <script language="javascript"> function Display(question) { h1=document.getElementById("yes"); h2=document.getElementById("no"); h3=document.getElementById("dk"); h4=document.getElementById("yes2"); if (question=="yes") h1.style.display="block"; else h1.style.display="none"; if (question=="no") h2.style.display="block"; else h2.style.display="none"; if (question=="dk") h3.style.display="block"; else h3.style.display="none"; if (question=="yes2") h4.style.display="block"; else h4.style.display="none"; } </script></head><body> <hr> <form name="form1"> <p>Do you like the colour blue?</p> <input type="radio" name="type" value="yes" checked onClick="Display('yes');"> Yes <input type="radio" name="type" value="no" onClick="Display('no');"> No <input type="radio" name="type" value="dk" onClick="Display('dk');"> Don't know<br><div ID="yes" style="display:none;"> <hr> <p>Do you like the colour red?</p> <input type="radio" name="type" value="yes2" checked onClick="Display('yes2')"> Yes <input type="radio" name="type" value="no2" onClick="Display('no2');"> No</div><div ID="yes2" style="display:none">I want this to appear beneath the 2nd set of buttons, not replacing it!</div><div ID="no2" style="display:none">test2</div><div ID="no" style="display:none"><b>this is my no box:</b><input type="text" name="no" size="25"></div><div ID="dk" style="display:none"><b>dk:</b><input type="text" name="dk" size="15"></div></form></body></html>So basically, i’m trying to make a little wizard – so something that will ask the user a question, and based on this – it will ask them another. I dont want to use server side applications so am trying something simple like this – but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select ‘yes’ and ‘yes’ again to see what i mean. Any help will be appreciated!
Joe
Advertisement
Answer
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html><head><title>My Wizard</title><script language="javascript">function Display(question, i) { h1=document.getElementById("yes"); h2=document.getElementById("no"); h3=document.getElementById("dk"); h4=document.getElementById("yes2"); if(i==1){ if (question=="yes") h1.style.display="block"; else h1.style.display="none"; if (question=="no") h2.style.display="block"; else h2.style.display="none"; }else if(i==2){ if (question=="dk") h3.style.display="block"; else h3.style.display="none"; if (question=="yes2") h4.style.display="block"; else h4.style.display="none"; }}</script></head><body> <hr> <form name="form1"> <p>Do you like the colour blue?</p> <input type="radio" name="type" value="yes" checked onClick="Display('yes', 1);"> Yes <input type="radio" name="type" value="no" onClick="Display('no', 1);"> No <input type="radio" name="type" value="dk" onClick="Display('dk', 1);"> Don't know<br><div ID="yes" style="display:none;"><hr> <p>Do you like the colour red?</p> <input type="radio" name="type" value="yes2" checked onClick="Display('yes2', 2)"> Yes <input type="radio" name="type" value="no2" onClick="Display('no2', 2);"> No</div><div ID="yes2" style="display:none">I want this to appear beneath the 2nd set of buttons, not replacing it!</div><div ID="no2" style="display:none">test2</div><div ID="no" style="display:none"><b>this is my no box:</b><input type="text" name="no" size="25"></div><div ID="dk" style="display:none"><b>dk:</b><input type="text" name="dk" size="15"></div></form></body></html>