Disabling form fields

The disabled property works in Explorer 4+, Mozilla, iCab, WebTV, Opera on Mac, Opera 6+ on Windows and Linux, Safari and Konqueror.

None of these browsers, except for iCab, send disabled form fields back to the server.

It works partially and buggily in Opera 5- on Windows and Linux.

My hack partially works in Netscape 3 and 4 and Omniweb

Disabling form elements is not at all possible in QNX Voyager, Escape and Hotjava.

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.

Example form

Try disabling the form fields below.

Text fields

My hack doesn't work in Netscape 3 and Omniweb.

Disable/enable

Selects

Cannot be disabled in WebTV

My hack doesn't work at all.

Disable/enable

Checkboxes

Cannot be disabled in Ice Browser

My hack doesn't work in Netscape 4 on Linux

Disable/enable

Radio buttons

Cannot be disabled in Ice Browser

My hack doesn't work in Netscape 4 on Linux

If one radio is disabled, the other is checked and you click on the disabled radio button, WebTV unchecks the enabled button, though it doesn't check the disabled button. All other browsers do nothing.

Disable/enable first one
Disable/enable second one
Disable/enable entire set

Textareas

My hack doesn't work in Netscape 3, Netscape 4 on Linux and Omniweb.

Disable/enable

Submit button

Can be disabled in Opera 5 but not enabled again.

Disable/enable

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.