Jquery change function is not working?

Question

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>

Check your javascript console, you have a syntax error. `elseif` should be `else if` -- the space is required. — Barmar, Jul 10 '15 at 00:23
@Barmar : Yes just checked that was an syntax error but still it isn't working at all..! — Umair Shah, Jul 10 '15 at 00:27
possible duplicate of [How to select html nodes by ID with jquery when the id contains a dot?](http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot) — showdev, Jul 10 '15 at 00:27

Ram · Answer 1 · 2015-07-10T00:29:19.640

4

There are 2 problems:

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

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

edited Jul 10 '15 at 00:29

answered Jul 10 '15 at 00:25

Ram

143,282
16
168
197

1

Good catch on the `.`. I'd recommend not using dots in IDs because of this. – Barmar Jul 10 '15 at 00:29
Nice..Great...I didn't even think about the "." dot that it may consider it a class..and yes ofcourse elseif was an syntax error..! – Umair Shah Jul 10 '15 at 00:30

Jquery change function is not working?

1 Answers1