jQuery "Auto Post-back" Select/Drop-Down List
- by Doug Lampe
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();
});
