Improving the world one post at a time

  Home  |   Contact  |   Syndication    |   Login
  27 Posts | 0 Stories | 50 Comments | 0 Trackbacks


Tag Cloud


My Sites

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>

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 () {

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 () {


posted on Monday, February 7, 2011 5:15 PM


# re: jQuery "Auto Post-back" Select/Drop-Down List 2/10/2011 12:44 AM Guilherme Cardoso
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.

# re: jQuery "Auto Post-back" Select/Drop-Down List 2/11/2011 8:59 AM Doug
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.

# re: jQuery "Auto Post-back" Select/Drop-Down List 2/11/2011 2:58 PM Doug
This does not work in ASP.Net MVC2 Ajax:


This does:


Post ammended.

# re: jQuery "Auto Post-back" Select/Drop-Down List 2/14/2011 5:33 AM Guilherme Cardoso
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!

# re: jQuery "Auto Post-back" Select/Drop-Down List 3/8/2011 3:09 AM Kenneth
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

# re: jQuery "Auto Post-back" Select/Drop-Down List 4/25/2011 11:28 AM Doug
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.

Post A Comment