Auto Submit a Form using jQuery on DropDown List Item Change

In this short example, let us quickly see how to submit a form automatically, when the user selects a new item from the HTML Select/DropDown List

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>Submit Form w/jQuery-DevCurry.com</title>
<
script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js" >
</
script>
<
script type="text/javascript">
$(function () {
$("#sel").live("change keyup", function () {
$("#form1").submit();
});
});
</script>
</
head>
<
body>
<
form id="form1" action="somepage.php" method="get">
<
select id="sel">
<
option value="0">Choose a Value</option>
<
option value="1">HTML 5</option>
<
option value="2">jQuery 4</option>
<
option value="3">Ruby 3</option>
</
select>
</
form>
</
body>
</
html>

In this example, both the change and keyup event of the DropDownList is captured using live(). According to the W3C specifications, the change event occurs when a control loses the input focus and its value has been modified since gaining focus. However IE triggers the ‘change’ event as soon as the option is selected, whereas Mozilla, Chrome and Safari do not. This behavior of triggering the change event by IE on keyboard scrolling is not according to the W3C specs. This is the reason that we use both the change and keyup event to capture selection, when the user uses the keyboard to scroll through the dropdownlist items.

See a Live Demo






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Anonymous said...

I used this code and it worked, thank you!

Laszlo from Hungary

Wilda Nisa said...

thx,it's so usefull :)