Change form fields by choosing a drop-down option

[metalaniac]

Hi there

I have been sitting with this for a while now and can't seem to get the correct script online. I get a lot of scripts being able to change a line of text, or input field by selecting an option in a drop-down box.

What i want is to be able to select an option from a drop-down box, which then changes a whole fieldset of 3 or more form field options, depending on the option chosen in the list.

Can anyone help with something like this??

[acoder]

Hi

That wouldn't be too difficult. You just need to loop over the elements. Show your HTML code so we can work from that.

[metalaniac]

Hi there.

Thank you. I apologize for the late reply. I greatly appreciate any help given on this subject. I have been searching in vain.

[HTML]
<tr>
<td class="lefttd">Please provide one of the following</td>
<td>
<select name="id">
<option value="0">Please Select</option>
<option value="1">UK Driving License</option>
<option value="2">UK Passport</option>
<option value="3">Non-UK Passport</option>
<option value="4">I will provide later...</option>
</select>
</td>
</tr>


<!-- This is option One -->

<tr>
<td class="lefttd">UK Driving Licence Number</td>
<td><input type="text" name="UKdrvl" value="" size="30" class="regtext" />
</td>
</tr>


<!-- This is option Two -->

<tr><td colspan="2">UK Passport Number</td></tr>

<tr>
<td colspan="2">
<input type="text" name="UKpass_num1" value="" size="10" onKeyUp="return autoTab(this, 10, event);" maxlength="10" />
<input type="text" name="UKpass_num2" value="" size="3" onKeyUp="return autoTab(this, 3, event);" maxlength="3" />
<input type="text" name="UKpass_num3" value="" size="7" onKeyUp="return autoTab(this, 7, event);" maxlength="7" />
<input type="text" name="UKpass_num4" value="" size="1" onKeyUp="return autoTab(this, 1, event);" maxlength="1" />
<input type="text" name="UKpass_num5" value="" size="7" onKeyUp="return autoTab(this, 7, event);" maxlength="7" />
<input type="text" name="UKpass_num6" value="" size="2" onkeypress="return numeralsOnly(event)" />
<br />
</td>
</tr>


<!-- This is option Three -->

<tr>
<td colspan="2">Non UK Passport Number</td>
</tr>

<tr>
<td colspan="2">
<input type="text" name="nonUKpass_num1" value="" size="9" onKeyUp="return autoTab(this, 9, event);" maxlength="10"/>
<input type="text" name="nonUKpass_num2" value="" size="1" onKeyUp="return autoTab(this, 1, event);" maxlength="1" />
<input type="text" name="nonUKpass_num3" value="" size="3" onKeyUp="return autoTab(this, 3, event);" maxlength="3" />
<input type="text" name="nonUKpass_num4" value="" size="7" onKeyUp="return autoTab(this, 7, event);" maxlength="7"/>
<input type="text" name="nonUKpass_num5" value="" size="1" onKeyUp="return autoTab(this, 1, event);" maxlength="1" />
<input type="text" name="nonUKpass_num6" value="" size="7" onKeyUp="return autoTab(this, 7, event);" maxlength="7" />
<input type="text" name="nonUKpass_num7" value="" size="13" onKeyUp="return autoTab(this, 13, event);" maxlength="13" />
<input type="text" name="nonUKpass_num8" value="" size="1" onKeyUp="return autoTab(this, 1, event);" maxlength="1" />
<input type="text" name="nonUKpass_num9" value="" size="1"/>

</td>
</tr>
[/HTML]

[acoder]

When you say that it changes a fieldset, do you mean that these fields should be hidden and only appear when the corresponding option is chosen from the select drop-down?

To hide the fields, add a style="display:none;" to the parent container. To make them visible, change the style to "display:block".

[metalaniac]

Yes, if they all should be hidden, only if you select an option from the drop down box should the corresponding form options appear below.I get the display:none and display:block, what I don't know how to do is to change the options without reloading the page...

When you say that it changes a fieldset, do you mean that these fields should be hidden and only appear when the corresponding option is chosen from the select drop-down?

To hide the fields, add a style="display:none;" to the parent container. To make them visible, change the style to "display:block".

[acoder]

I assume you know that you need to use an onchange event handler for the select drop-down element.

To show a row, you will need to access it, so give each row to be shown/hidden an id, then to show it, use document.getElementById(rowID).style.display = 'block';

[metalaniac]

That much I have gathered yes. I am not a Javascript fundy, and have been struggling to get my code to work in the frameworks available on the net for this kind of thing. I was hoping someone can assist with coding this for me.

[acoder]

Since you have more than one row for some options, it makes it a little more difficult. In some browsers, you can give a name to each row and access using getElementsByTagName, but this doesn't work in all browsers.

You can set a class for each row, but there's no getElementsByClassName. However, it's easy to get each row using table.getElementsByTagName("tr") :

var table = document.getElementById("tableID");
rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
  if (rows[i].className == ("option"+val)) { // assuming class is "option1", "option2", etc.
    rows[i].style.display = 'block';
  } else {
      rows[i].style.display = 'none';
    }
}