Monday, March 01, 2010
A Different Kind of Submission
Blog Entry #172
Today we begin a tour of HTML Goodies' "JavaScript Form Scripts" series of tutorials. I may or may not write a separate post for the second tutorial in this series, "Checkboxes: Only Two", which we previously discussed in the "Only two checkboxes, please" section of Blog Entry #47, but we'll definitely hit the rest of them.
In this post, we'll check over the first "JavaScript Form Scripts" tutorial, "Submit The Form Using Enter". In "Submit The Form Using Enter", Joe offers a script designed to submit a form when the user presses the enter/return key (hereafter "the enter key") after filling in a text field. Joe claims that the script's effect
is one that you've been requesting for a long time now,which I find a bit odd. When I submit a Web form, I want the Webmaster to make the means of submission as obvious as possible by providing a -type of button - there isn't enough of an intuitive connection between hitting the enter key and submitting a form for my tastes. But maybe that's just me.
Anyway, here's Joe's "Submit The Form Using Enter" code:
<script type="text/javascript">
function send( ) {
document.theform.submit( ); }
</script>
<form name="theform" method="post" action="mailto:jburns@htmlgoodies.com" enctype="text/plain">
<b>Submit your Name:</b>
<input type="text" name="mardi" size="30" maxlength="30" onUnfocus="send( );" />
</form>Joe provides a demo just prior to the tutorial's "The Code" section. Does the code work? Yes, but only accidentally so, as explained below.
Deconstruction
In brief, here's how the script is supposed to work:
The user types a name - say, Joe - into a
Submit your Name:
text box named mardi, the only control in a form named theform. The user presses the enter key, transferring focus away from the text box. The text box's onUnfocus event handler calls the script element's send( ) function, whose
document.theform.submit( ); command submits the user's form data, specifically the mardi=Joe name/value pair, to jburns@htmlgoodies.com via the form element's action attribute.onUnfocus??
There is no "onUnfocus" event handler, at least as far as JavaScript, HTML, and the DOM are concerned. It's not a classical JavaScript event handler, it doesn't appear in HTML 4.01's set of event handlers, it doesn't crop up in the DOM Level 2 Events Specification's "HTML event types" section, not even Microsoft lists it. It just ain't there, folks.
So, what should happen with the
onUnfocus="send( );" attribute? Actually, nothing should happen. In the HTML 4.01 Specification's "Notes on invalid documents" section, the W3C recommends, If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value).And yet hitting the enter key after entering a name into the mardi field does generate a submit event, as can be verified via adding an
onsubmit="window.alert('Form submission in progress...');" probe to the form element start-tag.One "Submit The Form Using Enter" commenter remarks,
onUnfocus is not supported, you should try onblur="send( );" - brilliant idea though.onBlur (or onChange) would indeed seem to be a logical replacement for "onUnfocus", but if the browser is supposed to
ignoreforeign attributes and their values, then the code should still work if we were to simply throw out both the onUnfocus attribute and the send( ) function that it purportedly calls, and this proves to be the case!
Moreover, a careful reading of the W3C's definition of the blur event -
[t]he blur event occurs when an element loses focus either by the pointing device or by tabbing navigation- indicates that pressing the enter key when a text box has focus shouldn't give rise to a blur event anyway. Sure enough, when I subtracted the theform form element (only the earliest browsers require an input element to have a form element parent), gave focus to the mardi field, and pressed the enter key, no blurring occurred - focus remained with the mardi field.
I find that the 'press the enter key, submit the form' effect can be carried out with type="text" and type="password" input fields but with no other form control types. This effect clearly does not constitute default HTML behavior but does seem to be default browser behavior in that it works with all of the OS X browsers on my computer, at least when the form data is submitted to a CGI processing agent. But should it be default browser behavior? Not really, IMO...
Keydown to submit
For current and future browsers that might not support the "Submit The Form Using Enter" effect, pressing the enter key and form submission can be more directly associated via the script below:
<form id="theform" method="post" action=URI enctype=content-type>
<b>Submit your Name:</b>
<input id="nameField" type="text" name="mardi" size="30" maxlength="30" />
</form>
<script type="text/javascript">
function enterToSubmit(e) {
var thisKey = e ? e.which : (event ? event.keyCode : "");
if (thisKey) {
if (thisKey == 13) // If the user presses the enter key:
document.getElementById("theform").submit( ); }
else window.alert("Sorry, your browser does not support the event object."); }
document.getElementById("nameField").onkeydown = enterToSubmit;
</script>The above code was inspired by a related script presented in Blog Entry #143. As the user fills in the mardi field, each keydown event calls the enterToSubmit( ) function. When the user presses the enter key, the value of enterToSubmit( )'s thisKey variable is 13, the ASCII code position for a carriage return, and the form is submitted. The
var thisKey = e ? e.which : (event ? event.keyCode : ""); conditional enables the script to work with browsers supporting either the Netscape event model or the MSIE event model - see Blog Entry #143 for descriptions of the which and keyCode properties of the event object.The mailto: blues
We previously encountered a mailto: form in the Script Tips #21-24 Script, which we deconstructed in Blog Entry #60. In the "The form element and its submission" section of that entry, I linked to HTML Goodies' "A New Forms Solution Using Perl or FrontPage" tutorial, which notes that mailto: forms are now obsolete for all practical purposes:
The problem arises because modern browsers, IE6 + and equivalent, no longer support email forms! The effect of this is that the visitor fills out the form and clicks the submit button and their email client program is invoked showing a blank email with the specified address in the "To" field. All information entered on the form appears to have been ignored. Essentially, these browsers are treating the email form as if it was a simple "Mailto" email link (for information about email links, see the HTML Mailto: Primer).In running Joe's "Submit The Form Using Enter" demo, most* of the OS X browsers on my computer do launch Mail, my email client, which in turn opens a "New Message" window. With Opera, the Mail message area is blank per the above quote. However, with Camino, Chrome, Firefox, and Safari, the mardi=Joe form information is displayed in the Mail message area; if other controls (a set of radio buttons, a selection list, etc.) are added to the theform form, their name/value data is also sent to Mail by these browsers. In all cases the Mail To: field holds the jburns@htmlgoodies.com address.
*MSIE does not launch Mail but instead pops up an A connection failure has occurred error message about a minute after pressing the enter key - the underlying problem in this case may be that MSIE 5.2.3 is not really meant for an Intel Mac but for a PowerPC Mac, but I don't know for sure. Perhaps not so surprisingly, Lynx doesn't launch Mail either; Lynx's behavior vis-à-vis Joe's demo is somewhat strange, and it's not really worth it to go into the details thereof, so we won't.
FWIW: The JavaScript 1.3 Client-Side Reference warns here that the submit( ) method of the form object cannot be used with a mailto: form, but this caveat obviously does not apply to browsers that won't send form data to a mailto: URL in the first place.
CGI it
In the tutorial's "The Form Code" section, Joe says,
I have this one set to work as a simple mailto: form, but it can just as easily work by attaching the output to a CGI. Just put the path to the CGI right there after the ACTION, like you normally would.In Blog Entry #60 I also linked to an EarthLink "Using the Mailto Script" page that describes the use of a send-form-data-to-an-email-address CGI script that EarthLink once made available to its subscribers; this link is now dead, but the help.earthlink.net/websupport/member/mailto.html page can still be accessed via the Internet Archive.
The instructions on the "Using the Mailto Script" page are quite easy to follow. I plugged the mardi input element into EarthLink's form code, set the "thank you page" to http://home.earthlink.net/~reptile7jr/tx.html*, and then uploaded the resulting code to my EarthLink server space to try out the "Submit The Form Using Enter" effect with it: worked like a charm with all of the OS X browsers on my computer, without exception. The overall mailto script effect is similar to that of the EarthLink appendto script that I demonstrated at http://home.earthlink.net/~reptile7jr/formtarget.html* for Blog Entry #16.
(*The formtarget.html and tx.html pages are at present not online - sorry 'bout that - I will adapt them for a not-dependent-on-EarthLink form targeting demo for Blog Entry #16 at some point in the future.)
In the EarthLink mailto form code, the form element's action attribute is set to home.earthlink.net/cgi-bin/mailto, which points to a script that can only be run by a page hosted by EarthLink's home.earthlink.net server. However, the aforecited "A New Forms Solution Using Perl or FrontPage" tutorial links to two sites that offer free "FormMail" CGI scripts for those of you wishing to pursue this further.
We'll tackle the third "JavaScript Form Scripts" tutorial, "Jump Focus with Form Elements", in the following entry.
reptile7
- posted by A. Peak @ 5:41 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)