jQuery "Auto Post-back" Select/Drop-Down List

Posted by Doug Lampe on Geeks with Blogs See other posts from Geeks with Blogs or by Doug Lampe
Published on Mon, 07 Feb 2011 22:15:21 GMT Indexed on 2011/02/07 23:26 UTC
Read the original article Hit count: 353

Filed under:

I have one common piece of jQuery code which I use to submit a form any time the selection changes on a drop-down list (HTML select tag).  This is similar to setting AutoPostBack = true in ASP.Net.  I use a single CSS class (autoSubmit) to annotate that I want the drop-down to force the form to submit on change so the HTML looks something like this:

<select id="myAutoSubmitDropDown" name="myAutoSubmitDropDown" class="autoSubmit">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

Then the following jQuery will look for any element with this CSS class and submit the parent form when the value is changed:

function wireUpAutoSubmit() {
  $(
".autoSubmit").each(function (index) {
    $(
this).change(function () {
      $(
this).closest('form').submit();
    })
  });
}

I put this in a separate function since I might need to wire this up explicitly after an ajax call.  Therefore I use the following code to set this method to fire when the DOM is loaded:

$(document).ready(function () {
  wireUpAutoSubmit();
});

 

© Geeks with Blogs or respective owner