jQuery how to get select change work in multiple form?

Question

I got this script from here

$(document).ready(function() {
    $('#choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $('#choose').val()
  },
            function(data) {
                $('#update').html(data);
            }
        );            
    }); 
});
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>

and i want to use it with multi ple form and also want it change only in that form , can anybody help me to make the code just like this

$(document).ready(function() {
    $('#choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $('#choose').val()
  },
            function(data) {
                $('#update').html(data);
            }
        );            
    }); 
});
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    </form>

Answer 1

id is unique to the page and should only be used once per element.

for your situation first thing would to replace id's with classes and change the jQuery accordingly.

try this:

$(document).ready(function() {
    $('.choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $(this).val()
  },
            function(data) {
                $(this).prev('.update').html(data);
            }
        );            
    }); 
});
 <form class='form' name="form1">
    <div class="update"></div>
    <select name='selected1' class="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>
 <form class='form' name="form2">
    <div class="update"></div>
    <select name='selected2' class="choose">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    </form>

Answer 2

Change it from using IDs, which must be unique to using classes, like this:

<form>
  <div class="update"></div>
    <select name='selected' class="choose">

Then make your script find the elements relatively, like this:

$('.choose').change(function(event) {
  var update = $(this).prev();
  $.post('select-ajax.php', $(this).closest('form').serialize(), function(data) {
    update.html(data);
  });            
});

I'm also using .serialize() to serialize the <form> here, you can leave that out and use { selected: $(this).value() } to pass only the <select>'s value. This approach works for any number of forms in the page.

Answer 3

You can not use the same id (choose, form) for multiple elements. You need to use different id names per element per page. Once you do that, you can modify your code like this:

$('#choose, #choose2').change(function(){
  // your code to handle two select boxes.
});

Where choose and choose2 are supposed to be the ids of your select boxes.

Note the comma in the selector; it is used to add more selector expressions/elements to the wrapped set. In your case, it represents two select boxes.

Answer 4

the id attribute should only be used once in your page, its a unique id for an element, if you want to select multiple elements you can use the following method.

<form id="search_users">....</form>
<form id="search_blogs">....</form>

$("#search_users,#search_blogs").change(...);

Answer 5

Thank you everybody.

specially "Nick Craver" your script working!!

you guys help my life easier me :D