Geeks With Blogs
Doug.Instance Improving the world one post at a time

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

 

Posted on Monday, February 7, 2011 5:15 PM jQuery | Back to top


Comments on this post: jQuery "Auto Post-back" Select/Drop-Down List

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
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.
Left by Guilherme Cardoso on Feb 10, 2011 12:44 AM

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
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.
Left by Doug on Feb 11, 2011 8:59 AM

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
Addendum:
This does not work in ASP.Net MVC2 Ajax:

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

This does:

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

Post ammended.
Left by Doug on Feb 11, 2011 2:58 PM

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
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!
Left by Guilherme Cardoso on Feb 14, 2011 5:33 AM

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
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
Left by Kenneth on Mar 08, 2011 3:09 AM

# re: jQuery "Auto Post-back" Select/Drop-Down List
Requesting Gravatar...
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.
Left by Doug on Apr 25, 2011 11:28 AM

Your comment:
 (will show your gravatar)


Copyright © Doug Lampe | Powered by: GeeksWithBlogs.net | Join free