JQuery/Javascript conflict? - Show/Hide div based on select option not working
Question
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.
2 answers
solution1
1 ACCPTED 2015-10-03 17:13:06
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 .
solution2
1 2015-10-03 17:13:23
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery show/hide div based on select option
Show/hide div based on select option not working
show hide div based on select option value jQuery
Show/Hide div based on select option
show/hide div based on select option with getelementsbyclassname
Javascript/Jquery: Show a hidden div based on a Radio/Option box select
Select “Option” Div Hide/Show using JQuery
jQuery Show / Hide Div According to Option Select
Show/hide div according to select option in javascript
Hide/Show div on select option change not working
Related Tags