Disabling form fields

A very useful tool is disabling of form elements. By using this you can make your forms easier to understand. "If you haven't checked this box, you cannot fill in that field"

Originally a Microsoft invention, other browsers have gone over to supporting it too. In addition to creating a more usable form, the disabled form fields are not sent back to the server.

Older browsers don't support the disabled property natively, but I found a workaround. Since this workaround is dependent on certain events being supported on form fields, it isn't perfect, though.

Nonetheless I found a far better solution to solve this interaction problem in my Usable Forms script.

Note that disabled form fields are not sent back to the server!

Example form

Try disabling the form fields below.

The script

In its purest form, the script is extremely simple. You simply set the disabled property of a form element. For instance, to disable the form element with name="address" you do

document.forms[0].address.disabled = true

To enable it again, set this property to false.

That's all. Of course, you have to know how to access form elements. Also, please note that except in Konqueror, you cannot disable entire groups of radio buttons. Since this might be useful some day, I hope the other browser vendors will add support for this.

The hack

To get this useful functionality working in other browsers, too, I've written a hack that works on most form fields in Netscape 4 and on some form fields in Netscape 3 and Omniweb.

To see if a form field is disabled, we still use the disabled property. It doesn't exist in these browsers, but when you set it, it is created. It doesn't have any 'native' meaning though, the browser doesn't care whether it's true or false. So we have to make it care.

To do this, I wrote a simple extra script:

function extracheck(obj)
{
	return !obj.disabled;
}

This function is called like this:

<tag onevent="return extracheck(this)">

So the form field is passed to the function. We check what the value of its disabled property is, reverse it and return this to the calling event handler. Thus, when disabled is true, the function returns false and vice versa. This value is in turn returned to the event handler. If false is returned, the event is canceled and nothing happens, giving the impression that the form field is disabled.

The most important question is: which event should we use? The most useful are onclick for checkboxes, radio buttons and submit buttons, and onkeydown for text fields and textareas. However, these events are not always supported for all form fields. If they aren't, this script won't work.

In addition, I don't know which event to use for a select box. None of my tries worked, so my hack doesn't work on select boxes.

The complete script

So the complete script becomes something like this:

function longtestscript()
{
  // check everything you need to check and then
  if (something is the case)
  	document.forms[0].element_name.disabled = true;
  else if (something else is the case)
  	document.forms[0].other_element.disabled = true;
  etc. etc.
}

function extracheck(obj)
{
	return !obj.disabled;
}

and in the HTML:

<input onkeydown="extracheck(this)" />
<input type=checkbox onclick="extracheck(this)" />

You'll have to add the proper event handler to every form field that might be disabled.