Viewing 2 text fields after selecting a radio button

Forum Moderators: open

Message Too Old, No Replies

Viewing 2 text fields after selecting a radio button

javascript automatic insertion

danielm28

5:30 am on Jun 27, 2004 (gmt 0)

Hello,

On my html form <No URLs, thanks. See TOS [webmasterworld.com]>,
I need to show 2 text fields ('License Number' and 'Active Date') only if a 'yes' radio button (answer to 'Do you have a license?') is selected. Does anyone know how to do this in javascript?

[edited by: DrDoc at 4:48 pm (utc) on June 28, 2004]

Zipper

8:53 am on Jun 27, 2004 (gmt 0)


<script language="javascript">
function showFields(v){
 var layers = document.all.tags("DIV");
 layers['license'].style.visibility=v;
}
</script>

Put the required HTML contents within the DIV tags and place it at the right spot.


<div id="license" style="visibility: hidden;">
License Number: <input name="license" type="text" maxlength="30"/><br>
Active Date: <input name="active_date" type="text" maxlength="15"/>
</div>

and then trigger the event using the radio buttons


Have License? <input type="radio" name="check1" value="1" onclick="showFields('visible')"> Yes <input type="radio" name="check1" value="0"> No

The above code was tested only on IE, so there is no guarantee for cross-browser compatibility.

Bernard Marx

9:05 am on Jun 27, 2004 (gmt 0)

Zipper posted in the meantime.
His is an easier way if your field set-up isn't complicated.
To get X-browser compatibility (IE4+,Moz, not NS4)

<script language="javascript"> 
function showFields(v){ 
var layer = (document.all)? document.all['licence']
       : document.getElementById('licence')
layer.style.visibility=v; 
} 
</script>

(My one...)

<html>
<head>
<script>function showbox(callingElm, doShow, names)
{
 var form = callingElm.form
 var state = doShow? "inline":"none"
 for(var i=0;i<names.length;i++)
 form.elements[names[i]].style.display = state
}
</script>
</head>
<body><form>
 yes<input name="something" type="radio" value="yes" checked="checked" onclick="showbox(this,true,['licenceno','activedate'])">
 no<input name="something" type="radio" value="no" onclick="showbox(this,false,['licenceno','activedate'])">
 <br>
 <input name="licenceno" type="text"><br>
 <input name="activedate" type="text">
</form>
</body>
</html>

danielm28

12:52 am on Jun 28, 2004 (gmt 0)

Thanks guys.
Zipper, I implemented to code and it worked. However, when 'yes' is chosen, the 2 text boxes appear at the beginning of the form instead of under the question 'Do you have a license?'. How do I integrate the code to be inline with the following structure?:

<tr valign="top">
<td>License
Number:
</td>
<td>
<input name="license" id="license" type="text" class="f_put" maxlength="30"/>
</td>
</tr>
<tr valign="top">
<td>Active
Date:</td>
<td>
<input name="active_date" id="active_date" type="text" class="f_put" maxlength="15"/>
</td>
</tr>

Thanks

Zipper

6:52 am on Jun 28, 2004 (gmt 0)

replace the above code with this one,


<tr valign="top"> 
<td>
<div id="license" style="visibility : hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">License 
Number:</font></td> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
<input name="license" id="license" type="text" class="f_put" maxlength="30"/> 
</font></td> 
</tr> 
<tr valign="top"> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Active 
Date:<span class='small'></span></font></td> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
<input name="active_date" id="active_date" type="text" class="f_put" maxlength="15"/> 
</font></td> 
</tr> 
</table>
</div></td>
</tr>

danielm28

4:03 pm on Jun 28, 2004 (gmt 0)

The table tags throw off the page layout.
Any thoughts?
thanks much

Zipper

5:12 pm on Jun 28, 2004 (gmt 0)

hhmm.. interesting.. I seem to have lost the url to your page, first try the following, else PM me the link.


<tr valign="top"> 
<td><div id="license" style="visibility : hidden;"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr valign="top"> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">License 
Number:</font></td> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
<input name="license" id="license" type="text" class="f_put" maxlength="30"/> 
</font></td> 
</tr> 
</table> 
</div></td> 
<td><div id="license2" style="visibility : hidden;"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr valign="top"> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Active 
Date:<span class='small'></span></font></td> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
<input name="active_date" id="active_date" type="text" class="f_put" maxlength="15"/> 
</font></td> 
</tr> 
</table>
</div></td>
</tr>

Remember to add the following line at the end of the javascript function before the closing curly brace (})


layers['license2'].style.visibility=v;