Doug.Instance

Improving the world one post at a time
posts - 22 , comments - 46 , trackbacks - 0

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

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').trigger('onsubmit');
    })
  });
}

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

 

Print | posted on Monday, February 7, 2011 5:15 PM | Filed Under [ jQuery ]

Feedback

Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

I use an form with a submit button for that select, with the value "Update Select" for example. On (document).ready of javascript, i hide that button.

This way we're giving an alternative to users with javascript disabled. If the javascript is enable, you'll hide the button on (document).ready and everything looks more pretty.
2/10/2011 12:44 AM | Guilherme Cardoso
Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

Good point. I work mostly on intranet stuff so not only I know that JS is enabled, what browser they are using (and what version), even what their default screen resolution is.

IMHO in today's world, if you don't have JS enabled there are a lot of things that just aren't going to work or at least ruin the user experience. I think a better technique would be to have a script-free version of the site and have a prominent link in your header hat you hide (or make less prominent) using JS.
2/11/2011 8:59 AM | Doug
Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

Addendum:
This does not work in ASP.Net MVC2 Ajax:

$(this).closest('form').submit();

This does:

$(this).closest('form').trigger('onsubmit');

Post ammended.
2/11/2011 2:58 PM | Doug
Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

Doug you're a luck dude!
Everytime i develope a web project, i always have to check it with main browsers (IE, FF, Opera, Safari and Chrome), older versions and new versions, etc.
Now imagine when you're using an fancy gallery with jQuery. If you have to write a non-javascript version you spent a lot of precious time on that!
2/14/2011 5:33 AM | Guilherme Cardoso
Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

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
3/8/2011 3:09 AM | Kenneth
Gravatar

# re: jQuery "Auto Post-back" Select/Drop-Down List

Guilherme: You could add another class for your buttons such as "autoSubmitButton" and then use the .each() method to hide those at the same time the above code is fired.
4/25/2011 11:28 AM | Doug
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
 

Powered by: