Javascripted Useable Forms

May 28th, 2007 Luke

With the rising popularity of Ajax, more and more people are starting to build webapps that rely heavily on Javascript. In a lot of cases, the HTML form element is also being used (or at least seems to be), in order to show a user where they are supposed to input data. It is not uncommon to see Ajax-enabled register/login pages that look exactly like regular register/login pages: Parakeet’s “Register” page is a good example of this.

However, a problem with this style is that, at least in some cases, the new javascript controls mean that the form no longer works as the user expects. This is bad for usability, and I’ve managed to figure out that the whole problem can be resolved (and unobtrusively, no less) by making use of the onsubmit parameter of the form tag.

If a user submits a form and there is a value for its onsubmit parameter, the web browser knows to call that function when the form is submitted. It then transmits the form data to the URL specified by the form’s action attribute. If there is no action specified, it sends the data to the page that it is currently on, subsequently refreshing the page.

When we write return false; inside an HTML attribute, we instruct the browser to run the code before it, and then return false. The action of returning false means that the browser will stop processing; whatever actions follow after the return false; statement will be ignored. The great part of this is that in a browser that doesn’t support Javascript or has it disabled, the parameter with the return false; statement inside of it will just be silently ignored. This allows us to make websites that work flawlessly for users with Javascript either enabled or disabled, with a minimal amount of extra effort.

By combining the onsubmit attribute of a form and the return false; statement of Javascript, we can make our forms react the way that a user would expect them to, whether Javascript is enabled or disabled. Take a look:

<script> var d = document; // shorthand variable function handleFormSubmission() { var inputValue = d.getElementsByTagName('input')[0].value; alert('The Value of the input is: ' + inputValue); } </script> <form onsubmit='handleFormSubmission(); return false;' action='http://girasquid.com/sample_code/jsdisabled.shtml'> <input type='text' /> <input type='submit' /> </form>

If you want to see how it turns out in an actual page, take a look at the Hardcoded onsubmit sample code I’ve put up.

This method involves painstakingly hard-coding the onsubmit attribute for each form element, though. Wouldn’t it be easier to just use a window.onload event?

The answer is yes. Here’s the new code:

<script> var d = document; // shorthand variable function handleFormSubmission() { var inputValue = d.getElementsByTagName('input')[0].value; alert('The Value of the input is: ' + inputValue); } // This anonymous function will attach our 'onsubmit' action for us, so that we don't add anything to our HTML markup. window.onload = function() { d.getElementsByTagName('form')[0].setAttribute('onsubmit','handleFormSubmission();return false;'); } </script> <form action='http://girasquid.com/sample_code/jsdisabled.shtml'> <input type='text' /> <input type='submit' /> </form>

To see it in action, check out my window.onload onsubmit sample code.

Posted in Ajax, forms, javascript, snippet, usability, webapps | No Comments »