CODEWITHSUNDEEP
javascriptjquerycss
Umair Shah
Umair Shah

Reputation: 11

Jquery change function is not working?

I am trying to change css of two divs on a change in a select tag when specific value is selected so can you please take a look over my code that what am I doing wrong?

$(document).ready(function() {
  $('#ads_site').change(function() {
    if ($(this).val() == 'boss.az') {
      $("#boss.az").css("display", "block");
    }
    elseif($(this).val() == 'jobsearch.az') {
      $("#jobsearch.az").css("display", "block");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="process.php">
  <select name="ads_site" id="ads_site">
    <option value="boss.az">boss.az</option>
    <option value="jobsearch.az">jobsearch.az</option>
  </select>
  <div id="boss.az" style="display:none;">
    <center>
      <h3>::Ads To Be Added::</h3>
    </center>
    <br>
    <input type="text" class="from_page" name="from_page" placeholder="From Page No">
    <input type="text" class="to_page" name="to_page" placeholder="To Page No">
  </div>
  <div id="jobsearch.az" style="display:none;">
    <center>
      <h3>::Ads To Be Added::</h3>
    </center>
    <br>
    <input type="text" class="from_ad" name="from_page" placeholder="From Ad No">
    <input type="text" class="to_ad" name="to_page" placeholder="To Ad No">
  </div>
  <input type="submit" name="submit" class="login login-submit" value="Submit">
</form>

Upvotes: 0

Views: 50

Answers (1)

Ram
Ram

Reputation: 144709

There are 2 problems:

  1. There is no elseif in JavaScript, you should use else if instead.

  2. Since your IDs contain . you should escape them, otherwise jQuery tries to select an element that has boss ID and az class name.

    $(document).ready(function () {
   $('#ads_site').change(function () {
      if ( this.value === 'boss.az' ) {
          $("#boss\\.az").show();
          // in case that you want to hide the other element
          //  $("#jobsearch\\.az").hide();
      }
      else if ( this.value === 'jobsearch.az' ) {
          $("#jobsearch\\.az").show();
      }
   });
});

Upvotes: 4

Related Questions