I have searched around the internet but I still can't find a solution to my problem. The issue I have is that I have a HTML selectbox and a text box as follows:
<p>
<label for="car_parking">Issue a car park pass ?:</label>
<select name="car_park_pass" id="car_park_pass" tabindex="<?php echo $tab++; ?>">
<option value="Please select">Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
<div id="reg_number">
<p>
<label for="car_reg_no">Car registration number</label>
<input type="text" name="car_reg_no" id="car_reg_no" tabindex="<?php echo $tab++; ?>">
</p>
</div>
The problem I have is that I want to display "reg_number" if "car_park_pass" is equal to "yes" but have it be hidden by default. I have the following javascript which I tried putting in the head and the body but nothing seemed to work:
$('select[name=car_park_pass]').change(function()
{
if ($(this).val() == 'yes')
{
$('#reg_number').show();
}
else
{
$('#reg_number').hide();
}
});
What do I need to do to make this work?
Try this:
$('select[name=car_park_pass]').change(function() {
if ($(this).val() == 'yes')
{
$('#reg_number').show();
}
else
{
$('#reg_number').hide();
}
});
Here is the html
<p><label for="car_parking">Issue a car park pass ?:</label>
<select name="car_park_pass" id="car_park_pass" tabindex="<?php echo $tab++; ?>">
<option value="Please select">Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select></p>
<div id="reg_number" style="display:none;">
<p><label for="car_reg_no">Car registration number</label>
<input type="text" name="car_reg_no" id="car_reg_no" tabindex="<?php echo $tab++; ?>"></p>
</div>
and here is the javascript
$( "#car_park_pass" ).change(function() {
if ($(this).val() == 'yes')
{
$('#reg_number').show();
}
else
{
$('#reg_number').hide();
}
});
You can see it working here http://jsfiddle.net/utn74a0s/
this code works, the problem was using .on()
this jquery code :
$(document).ready(function(){
$( "#car_park_pass" ).on( "change", function() {
if ($(this).val() == 'yes'){
$('#reg_number').show();
}
else{
$('#reg_number').hide();
}
});
});
$
symbol in this code ('select[name=car_park_pass]')
. });
, the brace is not open $('#car_park_pass')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <label for="car_parking">Issue a car park pass ?:</label> <select name="car_park_pass" id="car_park_pass"> <option value="Please select">Please select</option> <option value="yes">Yes</option> <option value="no">No</option> </select> </p> <div id="reg_number"> <p> <label for="car_reg_no">Car registration number</label> <input type="text" name="car_reg_no" id="car_reg_no"> </p> </div> <script type="text/javascript"> $(document).ready(function(){ $('#car_park_pass').on('change', function() { if ($(this).val() == 'yes'){ $('#reg_number').show(); } else{ $('#reg_number').hide(); } }); }); </script>
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.