One thing I've learned from making GNOME apps is to have usability in a very big consideration. Now I have started to make web applications and had to come across JavaScript (aka ECMAScript). This document will try to address a common problem on forms around the web, which is abuse controls sensitivity - in some interface toolkits this is regarded as controls enableness.

First let's create our very simple form:

<form>
Add a file: <input type="file" /> <input type="submit" />
</form>

This form has the flaw mentioned above, when it's loaded the first time the submit button is sensitive (enabled) and it shouldn't! If there is no value in the file entry then it should be disabled. This not only adds some valuable client side value validation but also adds a less confusing user experience. You want to spare the user some problems when he accidentally clicks the submit button. An easy way to do this is listen the onChange event:

<form>
Add a file: <input id="entFilename" type="file" onChange="javascript:verifyBrowseButton()"/> <input id="btnSendFile" type="submit" onClick="javascript:verifyBrowseButton()"/>
</form>
<script language="JavaScript">
<!--
	function verifyBrowseButton () {
		var btn = document.getElementById("btnSendFile")
		var value = document.getElementById("entFilename").value;
		if (!value)
			value = document.getElementById("entFilename").getAttribute("value");
		btn.disabled = !value;
		return btn.disabled;
	}
	verifyBrowseButton ();
//--!>
</script>

This is an example of a usable form. Let me try to explain the important parts of the code here.

The input objects have a special property called value, however this property is empty when the page is loaded, thus we can only rely on it if the attribute value (do not confuse it with the property) is also empty.

After we defined the function we called it. This is done to make sure the function is called when user clicks the reload button of his browser.

We listen the onChange event for obviouse reasons, we want the sensitivity of our button to depend on it, however current event model (at least with the gecko browser) is not perfect and if the user deletes the text after adding a file and then he presses directly on the send button and the changed event will not be called, therefore the button will be incorrectly disabled. To work around this we add another callback in the onClick event of the submit button. The astute reader will wonder the use of the return, this is in relation to the click event, when the user clicks a button if the value returned is false the event is canceled, thus the button will be disabled and the form will not be sent.

This way we learned a few techniques of javascript programming applied to forms and usability:

• Call functions after you define it if you want them called when the page is loaded and reloaded (aka refreshed)
• Make sure your the return of the function you put on the onClick event does what you want (or the form won't be sent)
• Controls sensitity makes your form more usable and "safe"

The final code:

Add a file: