CODEWITHSUNDEEP
javascripthtml
wrichards0
wrichards0

Reputation: 187

Javascript unhide text element not working

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?

Upvotes: 0

Views: 55

Answers (4)

Mahmoud Nabil
Mahmoud Nabil

Reputation: 21

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();
        }
    });
});

Upvotes: 1

Aroniaina
Aroniaina

Reputation: 1252

  • You forgot the $ symbol in this code ('select[name=car_park_pass]').
  • In the last line, }); , the brace is not open
  • Call the change function when the document is ready, it's more efficient
  • Select by ID si more efficient $('#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>

Upvotes: 0

UnitStack
UnitStack

Reputation: 1185

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/

Upvotes: 1

Deepak Biswal
Deepak Biswal

Reputation: 4320

Try this:

$('select[name=car_park_pass]').change(function() {
  if ($(this).val() == 'yes') 
  {
      $('#reg_number').show();
  } 
  else 
  {
      $('#reg_number').hide();
  }
});

Upvotes: 1

Related Questions