How To Use JavaScript To Auto-Submit Dropdowns, With No Submit Button

As a developer, I not only create websites, but I browse and interact on the web each day. One thing that I have found that is irritating, as a user, is when you are required to choose a selection from a dropdown form, and once selected, it does not autosubmit. In this tutorial we will show you have to use JavaScript to do just that.

Here is an example of such a form without an auto-submit. When you make a selection, you are required to submit the form using the standard submit button:

Now here is the same form with an auto-submit JavaScript in action:

Although there is no action attached to this form, you can see that it is submitted by the actions of the web browser (i.e. in the first one, no action occurs when you make a selection…in the second, you can see that the form is submitted).

Here is the code that is used for the form shown above. Essentially, the only difference in the form above is simply an onchange statement, along with a noscript tag that allows browsers that are not JavaScript-enabled to still function:

<form>
<select name=’myfield’ onchange=’this.form.submit()’>
  <option selected>Milk</option>
  <option>Coffee</option>
  <option>Tea</option>
</select>
<noscript><input type=”submit” value=”Submit”></noscript>
</form>

Note that the onchange event can be added to any form, and any element, including radio buttons, select elements, and even text fields. Make the world a better place and use an auto-submit form whenever you create a form. By using the noscript tag, any user can submit the form, and those of us with JavaScript enabled (which is most of us) will be saved the frustration and effort of submitting a form manually. I know it’s not much, but it adds a touch of professionalism and interaction to your site that your visitors will appreciate.