reptile7's JavaScript blog: Select and Submit

Sunday, June 03, 2012

Select and Submit
Blog Entry #253

In this post we'll take a quick look at HTML Goodies' "How To Use JavaScript To Auto-Submit Dropdowns, With No Submit Button" tutorial, which was authored by Scott Clark. The "Auto-Submit Dropdowns" tutorial offers a code snippet for submitting a form upon selecting a selection list option without clicking a button. With no further ado, here's the snippet:

<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>

A myfield selection list is equipped with Milk, Coffee, and Tea options; the Milk option is pre-selected. Upon selecting the Coffee or Tea option, the selection list's parent form is submitted via the selection list's onchange="this.form.submit( );" event handler. With respect to the form data set, the Milk/Coffee/Tea option labels respectively double as option values, which do not need to be explicitly set.

The selection list is followed by a button wrapped in a noscript element, which zeroes out the button for JavaScript-enabled users. An argument can be made that this is a non-semantic use of the noscript element as the noscript element is meant to provide alternate content when a script is not executed; moreover, the noscript element shouldn't have an input element child as it has a (%block;)+ content model. The state-of-the-art way to zero out the button in this situation is to give it an identifier, e.g., an id="input0" attribute, and then dynamically set its CSS display property to none:

window.onload = function ( ) { document.getElementById("input0").style.display = "none"; }

A demo for the above code is provided in the tutorial's second paragraph.
Spoiler alert:
The parent form's method value defaults to get and its action value 'resolves' to the URL of the tutorial page; as a result, the tutorial page reloads and a ?myfield=optionValue string is tacked on to the page's URL in the browser window's address bar upon selecting the Coffee or Tea option.

Commenter jmrker points out an obvious design flaw:

One other problem, easily corrected, would be the condition where a selection initialized in the drop down is the value the user wants to submit. Then the form would not allow submission unless the user changes from "milk" to something else, which would not be the option the user wanted to send. Easiest correction is to remove the 'selected' from the 'milk' option and add an option with a blank value as the selected option. This forces user to make a change from a blank field for the "onchange=" function to be called.

Long story short: prepend an <option value="" selected>Please choose a beverage</option> option to the option list so that the user can choose/submit the Milk option.

Other notes:

(1) Regarding the Dropdowns in the tutorial title, the auto-submit snippet is of course applicable to list-box selection lists generated by the size and/or multiple attributes of the select element

as well as to drop-down selection lists.

That said, it doesn't make much sense to apply the snippet to a multiple selection list because the parent form will submit as soon as the user selects an option.

(2) In the tutorial's last paragraph, Scott states:

Note that the onchange event can be added to any form, and any element, including radio buttons, select elements, and even text fields.

Classical JavaScript bound the onChange event handler to the FileUpload, Select, Text, and Textarea client-side objects; similarly, HTML 4.01 binds the onchange attribute to the input, select, and textarea elements. However, HTML 4.01's definition of the change event implies that onchange shouldn't apply to radio buttons (or to checkboxes):

The [on]change event occurs when a control loses the input focus and its value has been modified since gaining focus.

Blurring a radio button at most changes the button's checked status; the button's underlying value is not changed. In practice, I find that checking an

<input type="radio" name="myfield" value="Milk" onchange="this.form.submit( );" /> Milk

radio button does indeed trigger the button's onchange event handler with all of the OS X GUI browsers on my computer excepting IE, with which the onchange code is executed when the button is unchecked*; given this discrepancy, I think we should stick with a non-multiple selection list for our auto-submission control, don't you?

*According to a "Fires late on a radio/checkbox button" comment at the bottom of Microsoft's onchange event page, If you use onchange on a radio or checkbox button, the onchange event will not fire until you 'blur' the element. A bit of clarification is in order. Not all browsers will let you run through a set of radio buttons via the tab key, but IE will. Simply blurring a checked or unchecked radio button with IE is not enough to dispatch a change event; rather, to trigger onchange code it is necessary to actively check the radio button in question and then uncheck it by choosing another radio button. IE's checkbox onchange behavior is a bit weird - I'll spare you the details - but we shouldn't be using checkboxes here for the same reason we shouldn't be using a multiple selection list.

(3) The "Auto-Submit Dropdowns" tutorial is somewhat reminiscent of a "Submit The Form Using Enter" tutorial we covered a little over two years ago. The "Submit The Form Using Enter" tutorial addresses the auto-submission of a form by hitting the enter key when a text field has focus; in the tutorial's final section author Joe Burns recommends (not an exact quote), "Only do this if the field is the only one in the form," which is good advice for today's auto-submit snippet as well: the to-be-submitted form should contain the myfield selection list and that's it.

In conclusion, Scott exhorts us to make the world a better place by deploying the select-and-submit snippet so that JavaScript-enabled users will be saved the frustration and effort of submitting a form manually. I myself do not view clicking a button to be such an ordeal, but I guess not everyone shares my heroism in this regard. ;-)

The 'law of diminishing returns' is rapidly setting in vis-à-vis the Beyond HTML : JavaScript sector. Most of the sector's remaining tutorials I am not inclined to go through; these tutorials by and large present information in an abstract context whereas the thrust of this blog is to wrestle with blocks of code that actually do something - it doesn't have to be a productive something, it can be an educational something or a fun something, but it has to be something.

So in the next entry we will discuss one last sector tutorial, "How To Use JavaScript To Ensure Users Agree Before Posting", and then we will at long last bolt the HTML Goodies site - more on this later.
- posted by A. Peak @ 2:50 PM

Comments:

It's a pity you don't have a donatе buttоn!
Ι'd most certainly donate to this fantastic blog! I suppose for now i'll settlе
foг boοkmаrking and аdding your RЅЅ fеed to my Goοgle aссount.
I look forωard to fгеѕh updates anԁ will ѕhare this
site with my Fаceboοk gгоup. Talk soon!

My web ѕite - yeast infection treatment yeastrol review

# posted by

Anonymous : 10:30 PM

About Me