Menu
I have a booking form that I want to add multiple attendants to based on the number from a select option.
I've got this working on it's own here - https://jsfiddle.net/dentjames/7buxvd87/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
jQuery(function () {
var $blocks = $('.block');
$('#choices').change(function () {
$blocks.slice(0, +this.value || 1).show();
$blocks.slice(+this.value || 1).hide();
}).change()
})
</script>
</head>
<body>
<select id="choices">
<option value="">Please choose number of children</option>
<option value="1">1 Child</option>
<option value="2">2 Children</option>
<option value="3">3 Children</option>
<option value="4">4 Children</option>
<option value="5">5 Children</option>
</select>
<div id="block-1" class="block">
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text"><br><strong>First child</strong></div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* First Name:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cfname" type="text" id="Child First Name" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Surname:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="csname" type="text" id="Child Surname" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Sex:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<select name="csex" size="1" id="Child Sex">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Date of Birth:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cdob" type="text" id="Child Date of Birth" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" nowrap class="bodytext1">
<div align="left" class="text">Age at time of booking:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cage" type="text" id="Child age at time of booking" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Current school:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cschool" type="text" id="Child current school" size="40">
</font></span>
</div>
</td>
</tr>
</div>
<div id="block-2" class="block">
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text"><br><strong>Second child</strong></div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* First Name:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cfname" type="text" id="Child First Name" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Surname:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="csname" type="text" id="Child Surname" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Sex:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<select name="csex" size="1" id="Child Sex">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Date of Birth:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cdob" type="text" id="Child Date of Birth" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" nowrap class="bodytext1">
<div align="left" class="text">Age at time of booking:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cage" type="text" id="Child age at time of booking" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Current school:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cschool" type="text" id="Child current school" size="40">
</font></span>
</div>
</td>
</tr>
</div>
<div id="block-3" class="block">
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text"><br><strong>Third child</strong></div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* First Name:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cfname" type="text" id="Child First Name" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Surname:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="csname" type="text" id="Child Surname" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Sex:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<select name="csex" size="1" id="Child Sex">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Date of Birth:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cdob" type="text" id="Child Date of Birth" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" nowrap class="bodytext1">
<div align="left" class="text">Age at time of booking:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cage" type="text" id="Child age at time of booking" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Current school:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cschool" type="text" id="Child current school" size="40">
</font></span>
</div>
</td>
</tr>
</div>
<div id="block-4" class="block">
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text"><br><strong>Forth child</strong></div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* First Name:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cfname" type="text" id="Child First Name" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Surname:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="csname" type="text" id="Child Surname" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Sex:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<select name="csex" size="1" id="Child Sex">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Date of Birth:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cdob" type="text" id="Child Date of Birth" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" nowrap class="bodytext1">
<div align="left" class="text">Age at time of booking:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cage" type="text" id="Child age at time of booking" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Current school:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cschool" type="text" id="Child current school" size="40">
</font></span>
</div>
</td>
</tr>
</div>
<div id="block-5" class="block">
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text"><br><strong>Fifth child</strong></div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* First Name:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cfname" type="text" id="Child First Name" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Surname:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="csname" type="text" id="Child Surname" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Sex:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<select name="csex" size="1" id="Child Sex">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">* Date of Birth:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cdob" type="text" id="Child Date of Birth" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" nowrap class="bodytext1">
<div align="left" class="text">Age at time of booking:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cage" type="text" id="Child age at time of booking" size="40">
</font></span>
</div>
</td>
</tr>
<tr valign="baseline">
<td align="left" class="bodytext1">
<div align="left" class="text">Current school:</div>
</td>
<td colspan="2" align="left">
<div align="left"> <span class="text"><font color="#FFFFFF">
<input name="cschool" type="text" id="Child current school" size="40">
</font></span>
</div>
</td>
</tr>
</div>
</body>
</html>
But when I incorporate it to the main form, it doesn't work. I'm sure there's some conflict with the existing javascript and maybe some issues with the php.
The whole form can be viewed here: http://whizzkidsclub.co.uk/horsham_bookingform_multiple.php
Any help would be very much appreciated.
832
asked Jan 25 '26 13:01
In the url (whizkidsclub...), the div(s) with id block-1, block-2 etc does not contain any element(s). The controls of first child, second child etc are outside the div(s).
Move your controls to the correct div(s) and it should start working
Edit As Jason pointed out the issue is that div cannot be a direct child of table element. So one way to fix this would be to use nested tables. That is change <div id='block-1'> to <table id='block-1'>. That said I'm sure there must be a better way...
This fix is demonstrated here.
51
Your div's (with the block-* id's) are getting pulled out of the table by the browser and inserted just before the table. They're empty up there. I don't think div's are allowed as immediate children of a table. Check this out: http://jsfiddle.net/f9t4qqmw/
Source:
<table>
<div>
<tr><td>1234</td></tr>
<tr><td>abcd</td></tr>
</div>
</table>
Inspected:
<div></div>
<table>
<tbody>
<tr><td>1234</td></tr>
<tr><td>abcd</td></tr>
</tbody>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
