Some Javascript User Interface Elements
Here are some examples of appropriate uses of Javascript for websites.
These examples make use of W3C DOM support in IE 5+ and Gecko (Mozilla, Netscape 6+, etc).
To make sure you deliver compatible pages, you can redirect inside a noscript tag to a url for browsers with javascript turned off. The no-javascript page could include a script to redirect if compatible javascript is present. That way, if someone bookmarks or emails a url to a different browser, the browser will still get sent to the right place.
Note that I'm not suggesting that you use the actual code I've written here. Most of these functions should be rewritten before use.
onSubmit, deactivate submit buttons
The highest leverage use of Javascript is probably to deactivate the submit and reset buttons when the user submits the form. This prevents double submits. Anybody who doesn't use this for ecommerce transactions has some explaining to do.
Trap page exit
Similarly – but only available in WinIE – you can trap leaving a page. For example, if a form field was changed, and the user tries to leave the page any way but by submitting the form, pop up a dialog to warn of possible data loss. Why isn't onbeforeunload part of DOM?
Select widgets
You can create your own widgets. For example, populate_time.html lets you click on text in insertable panes to choose a time, which is also updated into hidden fields to be submitted. Note that it doesn't use regular HTML form fields, either to select or display the selection.
Highlight selected labels
If you display several radio buttons on a line, it might be convenient to highlight the label of the selected button... to make it clear which label the button is associated with.
Dependencies
You can also handle dependencies between fields – if the user selects one value of a certain field, other fields could be deactivated. You might want to make it very obvious that a field isn't active by changing the background color, or adding a message like "not available when x is selected above".
onSubmit data validation
If the validation rule is as simple as "fill in all the fields", you could get away with a pop-up dialog.
But where there are many fields and more than one rule, a better approach is to hide all the possible error messages, then display the messages triggered by validation.
Layered text
One of the key benefits of scripted DOM is the ability to get more information into a url and accessible on the screen by showing and hiding different blocks of text or form elements. js_populate_pane.html shows a pop-up pane.
js_swap_text.html displays one of several blocks of text when you click on a link. (It simulates the original, appropriate frame behavior, where navigation on the page is local, and the back button takes you out of the page, no matter how many times you've clicked on the internal links. Obviously, this sort of trick may be inappropriate where bandwidth is relatively scarce.
Clone page in new window
A problem I find in using the web is that I get to a point in some series of webpages, and I want to refer back to a previous page, but I don't want to lose my current position. If I use the back key, I'm in danger of losing data, or I might click on a link on some previous page and lose the whole history chain. Recent versions of browsers with the complete history in a sidebar help find your place again in many cases, but you could still lose state, and you would have to use attention and time to get back to the page you had already found.
I thought "back in new window" would be very useful, but of course "back" is tied to the current window. So instead, there's open this page in a new window – write the html to a new window, and also set the current values of every form field. After opening the current page in a new window, you can go back through the old window's history without losing your current state.
Alas, the script only updates form elements that have an id. And for that matter, I'm setting the value attribute, which is fine for text fields and some others, but other types of fields would require more code.
It's hard to imagine using this gimmick in the real world, though a limited version of it makes an interesting "bookmarklet". A bookmarklet is a bit of Javascript code you keep in the URL field of a bookmark.
This code opens the current page in a new window, but doesn't try to update form fields.
Create a bookmark with a spiffy title like "open this page in a new window", and paste this into the url field):
javascript:var newWin = window.open("","",""); newWin.document.write(document.documentElement.innerHTML)
Copyright © 1998-2011 J. R. Boynton