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

Hide or Display Form Elements based on a Select

P: 2
Hi All

I am putting a form together and I need to be able to hide or display elements of the form based on what is selected with a select.

The form is a passenger details entry form and the number of passenger entry elements depends on what was selected in a select.

The HTML is as follows
<tr>
<td width="124"><span class="sectorlabel"> Number of Adults </span> </td>
<td colspan="3"><span class="sectorbox">
<select name="Num_Adults" id="Num_Adults">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span></td>
</tr>
<tr>
<td width="124"><span class="sectorlabel"> Adult 1 Surname </span> </td>
<td width="216"><span class="sectorbox">
<input name="a1_surname" type="text" id="a1_surname"
value=""
size="40">
</span></td>
<td width="70"><span class="sectorlabel">First Name </span></td>
<td width="224"><span class="sectorbox">
<input name="a1_first" type="text" id="a1_first"
value=""
size="40">
</span></td>
<td width="29"><span class="sectorlabel">Title</span></td>
<td width="94"><span class="sectorbox">
<select name="a1_title" id="a1_title">
<option value="MR" selected>Mr</option>
<option value="MRS">Mrs</option>
<option value="MISS">Miss</option>
<option value="MS">Ms</option>
</select>
</span></td>
</tr>

The <tr> </tr> block for the name entry is repeated 4 more times. The input name is changed to a2, a3 etc.

The idea is that if only 1 is selected on the Num_Adults select then I only want to see the <tr> </tr> for the a1 input.

If 2 is selected then I want to see the a1 <tr></tr> and the a2 <tr></tr>.

If 3 is selected then the a1,a2 a3. and so on.

I may not be doing this the best way and I would appreciate any help.

Thanks

Richard
Jun 7 '07 #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,331
hi ...

a simple way would be the following:

[HTML]
<script type="text/javascript">

function toggle_lines(val) {
// collection of lines
var lines = document.getElementsByTagName('tr');

for (var i = 0; i < lines.length; i++) {
var row = lines[i];

// we match the last char of the row.id
var id_val = row.id.match(/\d{1}$/);


var display = id_val <= val;

if (id_val != null) {
row.style.visibility = display ? 'visible' : 'collapse';
}
}
}
</script>


<table border="1">
<tr>
<td width="124">
<span class="sectorlabel"> Number of Adults </span>
</td>
<td colspan="5">
<span class="sectorbox">
<select name="Num_Adults" id="Num_Adults" onchange="
var val = this.options[this.selectedIndex].value;
toggle_lines(val);
">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</span>
</td>
</tr>
<tr id="a1">
<td width="124">
<span class="sectorlabel"> Adult 1 Surname </span>
</td>
<td width="216">
<span class="sectorbox">
<input name="a1_surname" type="text" id="a1_surname" value="" size="40">
</span>
</td>
<td width="70">
<span class="sectorlabel">First Name </span>
</td>
<td width="224">
<span class="sectorbox">
<input name="a1_first" type="text" id="a1_first" value="" size="40">
</span>
</td>
<td width="29">
<span class="sectorlabel">Title</span>
</td>
<td width="94">
<span class="sectorbox">
<select name="a1_title" id="a1_title">
<option value="MR" selected>Mr</option>
<option value="MRS">Mrs</option>
<option value="MISS">Miss</option>
<option value="MS">Ms</option>
</select>
</span>
</td>
</tr>
<tr id="a2" style="visibility: collapse">
<td width="124">
<span class="sectorlabel"> Adult 2 Surname </span>
</td>
<td width="216">
<span class="sectorbox">
<input name="a2_surname" type="text" id="a2_surname" value="" size="40">
</span>
</td>
<td width="70">
<span class="sectorlabel">First Name </span>
</td>
<td width="224">
<span class="sectorbox">
<input name="a2_first" type="text" id="a2_first" value="" size="40">
</span>
</td>
<td width="29">
<span class="sectorlabel">Title</span>
</td>
<td width="94">
<span class="sectorbox">
<select name="a2_title" id="a2_title">
<option value="MR" selected>Mr</option>
<option value="MRS">Mrs</option>
<option value="MISS">Miss</option>
<option value="MS">Ms</option>
</select>
</span>
</td>
</tr>

</table>
[/HTML]

play with it ;) but this way is not the best to do such things ... you would better CREATE the line dynamically depending of the number you need ... have a look at standard dom-methods (createElement, appendChild, setAttribute) ... that allow you to create elements and append it to the document and its child-elements ... you may imagine the document as a hierarchy or tree of nodes that build your page ... you may remove, append, create nodes whereever you want within that tree ... that's the cool way to do your task ... the shown above is the simple and beginner way ... and of course: it works too ;) ... use the provided solution and have a look at the mentioned dom-methods for yourself and find out whats cool with that ;) ... ask your questions after that ... i'm convinced that you will prefer dom-scripting after having a look at it ;)

kind regards ...
Jun 8 '07 #2

ronnil
Expert 100+
P: 134
yep, the DOM method is the best way if you want your submitted values to depend on the choice of the selectbox.

however, if you just want to divide your form with 40 input fields into 4 steps with 10 input fields, this show/hide method is much more simple.
Jun 8 '07 #3

Post your reply

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