Published on: Tuesday 17th November 1998 By: Martin Webb
Why disable? Well, you might want to stop the user from interacting with your form after they have submitted the form already, perhaps while the form data is being processed on the server, or perhaps you want to display the form but only let the user enter one part of the form at a time.
How do you disable? The HTML 4.0 Recommendation includes form attributes, that when supported by browsers, will enable you to easily perform blocking of access to form fields.
This article will describe these methods in detail, as well as a solution that can be used to get the best out of each browser.
For the rest of this article, we will be demonstrating how to disable an example form made up of this HTML.
I haven't included a hidden form field in the above example as, by its nature, it is hidden and therefore the contents cannot be amended directly by the user.
The HTML 4.0 Recommendation, available from the World Wide Web Consortium (W3C), includes form field attributes that allow any form field element to be selectively enabled and disabled. The HTML 4.0 Recommendation states:
"When set, the disabled attribute has the following effects on an element: Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. Disabled controls cannot be successful. The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA. This attribute is inherited but local declarations override the inherited value. How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc. In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form. <INPUT disabled name="fred" value="stone">. Note: The only way to modify dynamically the value of the disabled attribute is through a script."
Currently (November 1998), the only browser to support HTML 4.0 is MSIE 4 (the version numbering is accidental). However, Netscape is working on including HTML 4.0 support in their next version of NN.
The only part that requires any explanation is the use of the radio groups length property to loop around all the like named radio buttons to set each one's disabled property.
All that is required is a means to suspend and resume our example form.
To see what this looks like, you can enable and disable the example form: Example 1. Note: This will only work in browsers that support HTML 4.0.
One aspect of DHTML is "layers" or "layering." Imagine, for example, several pages within a book. They are laid one on top of another. Now imagine parts of a document in a browser laid one on top of another. This is what is meant by layers.
These layers can include HTML, text and images. They can be as small or as large as you require and can be hidden and then reshown at will. It is this last technique that we can use in both MSIE4 and NN4 to effectively disable a form -- by making the form, or parts of it invisible
The example form needs to be placed within <DIV> and </DIV> or <SPAN> and </SPAN> tags. With NN4 you must specify a style position of relative to actually cause the DIV or SPAN tags to create a "layer":
<SPAN ID="myLayer" STYLE="position:relative;"> <!-- place form in here --> </SPAN>
<ILAYER ID="myLayer"> <!-- place form in here --> </ILAYER>
To see what this looks like, you can view the revised form: Example 2. Note: this will now work in NN4 and MSIE4.
This code demonstrates the best that can be done.
Initially the form is enabled, i.e., 'off' is set to 'false'. Pressing the Suspend button to disable the form will set 'off' to 'true' and then invokes the copyData() function to copy the value of all the text fields and selected radio to the hidden form fields with the myCopy form. Once the form is suspended then the form fields are protected by the use of the relevant onClick and onChange event handlers, which either reverse the value of check boxes, copy the old value of the form field from the hidden form, or set the selected option or the checked radion button from the hidden form.
When combined with the previous techniques, you can be fairly certain that the user cannot interact with the form unless you want them to. As and when Netscape supports HTML 4.0, and as more people upgrade their browser to the latest versions, the HTML 4.0 solution will become more and more suitable. Until that time, you'll need to include the necessary workarounds/hacks to achieve the same effect.