How to create a "reactive" form?

thenext88 · Jul 13, 2008

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 · Jul 14, 2008

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 · Jul 14, 2008

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.

How to create a "reactive" form?

Established Member

Established Member

Established Member

118888.xyz

DallasMoldRemoval.com

AiLocators.com

SivaHareesh.com

SweetCrudeOil.Com

Re-Con.com

Koium.Com

DomainDots.Com

Restocked.xyz

247cryptocoins.com

Similar threads

We're social

118888.xyz

DallasMoldRemoval.com

AiLocators.com

SivaHareesh.com

SweetCrudeOil.Com

Re-Con.com

Koium.Com

DomainDots.Com

Restocked.xyz

247cryptocoins.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling