EDIT: Sorry I was very tired and the code was actually working when writing here! WTF :D

I have many different dropdowns on the same page and wan't to do an AJAX request when on of them changes.

If I do it this way, it works:

  $(document).on('change', '#changeresponsibleuser', function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });
  });

But this trickers on all dropdown boxes I have on the page. I wan't to do something like this:

  $(document).ready(function(){
  $("#changeresponsibleuser").on('change',function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });

      });
  });

So it ONLY listens to the dropdown with that exact ID. But it does not work, the on change event is not triggered.

How can I trigger the event only when #changeresponsibleuser changes?

The markup looks like this:

<select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">

<option name="user" value="36" selected="selected">One user</option>
<option name="user" value="41">Another user</option>
<option name="user" value="40">yet another user</option>
</select>

Thanks in advance!

EDIT: Sorry I was very tired and the code was actually working when writing here! WTF :D

I have many different dropdowns on the same page and wan't to do an AJAX request when on of them changes.

If I do it this way, it works:

  $(document).on('change', '#changeresponsibleuser', function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });
  });

But this trickers on all dropdown boxes I have on the page. I wan't to do something like this:

  $(document).ready(function(){
  $("#changeresponsibleuser").on('change',function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });

      });
  });

So it ONLY listens to the dropdown with that exact ID. But it does not work, the on change event is not triggered.

How can I trigger the event only when #changeresponsibleuser changes?

The markup looks like this:

<select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">

<option name="user" value="36" selected="selected">One user</option>
<option name="user" value="41">Another user</option>
<option name="user" value="40">yet another user</option>
</select>

Thanks in advance!

• javascript
• jquery
• ajax

• ID attributes in a document must be unique! – Rayon Commented Apr 18, 2016 at 4:52
• after page load $("#changeresponsibleuser") check this mand in console to see the number of element in DOM – RIYAJ KHAN Commented Apr 18, 2016 at 4:53

3 Answers 3

$(function(){
 $("#changeresponsibleuser").on('change', function(){
   alert("Works");
 })
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">

<option name="user" value="36" selected="selected">One user</option>
<option name="user" value="41">Another user</option>
<option name="user" value="40">yet another user</option>
</select>

It works. How do you say it is not working?

But this trickers on all dropdown boxes I have on the page

No. You have to use class name instead id. It seems you are using duplicate ids. So it is triggering on all select dropdowns which has duplicate id.

$(document).on('change', '.changeresponsibleuser',function(){
   alert("Works");
 });

It will trigger on all drop down changes which has class changeresponsibleuser

Are you loading drop down with id changeresponsibleuser with AJAX? If you are doing that it means dropdown is not available for binding change event on document ready. Instead using this you can use - select onchange="function_name()"

and you can write your ajax request in this function.

Your markup:

<select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">
    <option name="user" value="36" selected="selected">One user</option>
    <option name="user" value="41">Another user</option>
    <option name="user" value="40">yet another user</option>
</select>

And your js like:

$(function() {
    $("#changeresponsibleuser").change(function() {
        // do your stuff
    });
});

Don't forget to include jQuery lib in your markup.

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>