How to create a "reactive" form?

thenext88 · 07-13-2008, 04:33 PM

I'm looking at creating some type of reactive form, where if an option selected, the options below will depend on what the person selected...

For example... The Form has two options A and B.

If option A is selected, then a new option menu shows below displaying sub-options C and D. If option B is selected then a new option menu shows below displaying sub-options E and F instead.

Pretty much what I'm looking at is...

If A is selected -> Display html code for options C and D
If B is selected -> Display html code for options E and F

So I would need to pull the value that is selected, and display code based on which value is selected without refreshing the page.

I would assume Javascript... but I know very little if of this. I would appreciate any help/guidance. Thanks.

Bruce_KD · 07-13-2008, 06:33 PM

This is tested in Firefox, but not IE.

Code:

<html>
<head>

<script type='text/javascript'>
function showHide() {
  var which = document.theForm.option1[0].checked?1:2;
  document.getElementById('option_' + which).style.display = '';
  document.getElementById('option_' + (Math.abs(2 - which) + 1)).style.display = 'none';
}
</script>

</html>

<body>

<form action='script.php' method='POST' name='theForm'>
<div>
  <input type='radio' name='option1' value='1' onclick='showHide();' /> Show Option 2
</div>
<div style='padding-bottom: 10px;'>
  <input type='radio' name='option1' value='2' onclick='showHide();' /> Show Option 3
</div>

<div id='option_1' style='display: none;'>
  <input type='radio' name='option2' value='1' /> Option 2 Choice 1 <br />
  <input type='radio' name='option2' value='2' /> Option 2 Choice 2
</div>

<div id='option_2' style='display: none;'>
  <input type='radio' name='option3' value='1' /> Option 3 Choice 1 <br />
  <input type='radio' name='option3' value='2' /> Option 3 Choice 2
</div>

<div>
  <input type='submit' value='Submit'>
</div>

</form>

</body>
</html>

thenext88 · 07-14-2008, 02:30 PM

Hey thanks for the script. Wasn't quite what I needed (needed drop down menus) but I still appreciate it. I actually did a bit more searching, and found something called "dynamic form options" which is exactly what I needed, so my problem is solved. Thanks again.

By the way it works in IE.

07-13-2008, 04:33 PM	#1 (permalink)
thenext88 NamePros Regular Join Date: Jun 2008 Posts: 224 0.00 NP$ (Donate)	How to create a "reactive" form? I'm looking at creating some type of reactive form, where if an option selected, the options below will depend on what the person selected... For example... The Form has two options A and B. If option A is selected, then a new option menu shows below displaying sub-options C and D. If option B is selected then a new option menu shows below displaying sub-options E and F instead. Pretty much what I'm looking at is... If A is selected -> Display html code for options C and D If B is selected -> Display html code for options E and F So I would need to pull the value that is selected, and display code based on which value is selected without refreshing the page. I would assume Javascript... but I know very little if of this. I would appreciate any help/guidance. Thanks. __________________ http://www.lucid.me (free online dream journal with stats tacking available) http://www.luhd.com http://www.logical2012.info (the next doomsday, or not)

07-14-2008, 02:30 PM	#3 (permalink)
thenext88 NamePros Regular Join Date: Jun 2008 Posts: 224 0.00 NP$ (Donate)	Hey thanks for the script. Wasn't quite what I needed (needed drop down menus) but I still appreciate it. I actually did a bit more searching, and found something called "dynamic form options" which is exactly what I needed, so my problem is solved. Thanks again. By the way it works in IE. __________________ http://www.lucid.me (free online dream journal with stats tacking available) http://www.luhd.com http://www.logical2012.info (the next doomsday, or not)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)