Javascript for online forms

[printline]

I have made an online form for people to fill out.

In that form, sometimes when people check the yes radiobutton new options to fill out comes up.

Ex. code:

<script language="JavaScript">
function getDiv1(){
var getDiv1 = document.getElementById("array_div");
var getradio = document.getElementById("in_array");
if (getradio.checked == true){
getDiv1.style.display = "";
}else{
getDiv1.style.display = "none";
}

}
</script>

<input name="in_array1" id="in_array" type="radio" value="" style="border-style:none;" onClick="javascript:getDiv1();">Panel

<div id="array_div" style="display:none;">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="left" valign="middle" colspan="3"><img src="images/subpanel.gif"></td>
</tr>
<tr>
<td width="5%" align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td width="34%" align="left" valign="middle">Panel size X</td>
<td width="61%" align="left" valign="middle"><input name="panel sizex" type="text" size="15"></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td align="left" valign="middle">Panel size y</td>
<td align="left" valign="middle"><input name="panel sizey" type="text" size="15"></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td align="left" valign="middle">Boards per panel X </td>
<td align="left" valign="middle"><input name="boards_per_panelx" type="text" size="15"></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td align="left" valign="middle">Boards per panel y </td>
<td align="left" valign="middle"><input name="boards_per_panely" type="text" size="15"></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td align="left" valign="middle">Board seperation</td>
<td align="left" valign="middle"><select name="board_seperation">
<option>Break routing</option>
<option>V-cut</option>
</select> </td>
</tr>
<tr>
<td align="left" valign="middle"><img src="images/help_icon1_lille.gif"></td>
<td align="left" valign="middle">Pasta data required</td>
<td align="left" valign="middle"><input name="pasta_data" type="radio" value="no" style="border-style:none;">No&nbsp;&nbsp;<input name="pasta_data" type="radio" value="yes" style="border-style:none;">Yes&nbsp;&nbsp;(If "yes" specify date)</td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle"><script>DateInput('birth_date', true, 'DD-MON-YYYY')</script></td>
</tr>
</table>
</div>


Now, I want to do the same thing on a drop down list, where for example i have a list like this:

<select name="num_layers" size="1">
<option selected>1</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
</select>

And then when for example you select 4, you get some new options to fill out.

But what is the javascript code for this??????????????

Please help!!!!!!!

 

[cLFlaVA]

depends, will the number you select be driving the number of options to fill out? or will there be a specific set of "options to fill out" for each different select option?



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[printline]

It doesn't matter what number you select, the new set of options will always be the same.........

 

[cLFlaVA]

you would use the onchange event of your select box to change the style of a div or fieldset. something like this, as a basic example:

<form name="f">
<select name="s" onchange="document.getElementById('d').style.display=(this.selectedIndex>0)?'block':'none';">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">2</option>
</select>
<div id="d" style="display:none;">
   <!-- place other fields here //-->
</div>
</form>

*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[printline]

Thank You very much......... It works perfect!