JavaScript Forms

@robreynNov 07.2007

I’m trying to make a form and I need to find out how to do something:

One of the questions on the form is: Do you have a spouse?
with the radio options of “yes” or “no”.

If they select Yes, then I want the following questions to become available:

Spouse’s name.
Spouse’s date of birth.
Spouse’s…etc.

But if they say no, I don’t want those questions to become available.
How do I do this?

Thanks,

Rob

to post a comment

JavaScript

@LeeUNov 07.2007 — #Try this (with credit to others who have shared portions of this code on this forum):

[CODE]
 function toggleMe(obj, a){
 var e=document.getElementById(a);
 if(!e)return true;
 e.style.display="block"
 return true;
 }
 
 function toggleMe2(obj, a){
 var e=document.getElementById(a);
 if(!e)return true;
 e.style.display="none"
 return true;
 }[/CODE]

[CODE]
 <form name="theForm">
 Are you married?<br>
 <input type="radio" name="married" value="yes" onclick="return toggleMe(this, 'marriedInfo')"> Yes
 <input type="radio" name="married" value="no" onclick="return toggleMe2(this, 'marriedInfo')"> No<br>
 <div id="marriedInfo" style="display: none; margin-left: 20px;">
 Spouse's name: <input name="name" type="text">
 Spouse's date of birth: <input name="bday" type="text">
 </div>
 
 </form>[/CODE]

@Ay__351_eNov 07.2007 — #

 <br/>
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 var el = function(myid) { return document.getElementById(myid);}
 function show () {
 el('q1').style.display = (el('y0').checked ) ? "block" : "none";
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;span id="q0"&gt;Do you have a spouse?&lt;br&gt;
 &lt;input type="radio" name="rad0" id="y0" onclick="show()"&gt;yes&lt;br&gt;
 &lt;input type="radio" name="rad0" id="n0" onclick="show()"&gt;no&lt;br&gt;
 &lt;/span&gt;
 &lt;span id="q1" style="display:none;"&gt;
 Spouse's name.&lt;input type="type" name="inp0"&gt;&lt;br&gt;
 Spouse's date of birth.&lt;input type="type" name="inp1" &gt;&lt;br&gt;
 Spouse's...etc.&lt;input type="type" name="inp2" &gt;&lt;br&gt;
 &lt;/span&gt;
 
 &lt;br&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@robreynauthorNov 09.2007 — #thanks, I'll give that a try.

JavaScript Forms

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JavaScript Forms

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴