By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,105 Members | 2,620 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,105 IT Pros & Developers. It's quick & easy.

Change form fields by choosing a drop-down option

P: 5
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??
Jan 16 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Jan 16 '08 #2

P: 5
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]
Jan 21 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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".
Jan 21 '08 #4

P: 5
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".
Jan 21 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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';
Jan 21 '08 #6

P: 5
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.
Jan 21 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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") :
Expand|Select|Wrap|Line Numbers
  1. var table = document.getElementById("tableID");
  2. rows = table.getElementsByTagName("tr");
  3. for (i = 0; i < rows.length; i++) {
  4.   if (rows[i].className == ("option"+val)) { // assuming class is "option1", "option2", etc.
  5.     rows[i].style.display = 'block';
  6.   } else {
  7.       rows[i].style.display = 'none';
  8.     }
  9. }
Jan 21 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.