Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Disabling form elements [ previous next ]
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.
Presently, only Microsoft Internet Explorer (MSIE) 4 supports HTML 4.0. An alternative for Netscape Navigator (NN) 4 is to use Dynamic HTML (DHTML) to position a transparent layer over the form, to enable the user to see the form but disallow them to interact it. An alternative for pre-version 4 browsers is to use JavaScript to capture the user interacting with the form and to then "undo" the changes.
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.
To programmatically enable and disable the form fields, all that is required is to set the disabled property of each form field element to true or false. The following JavaScript functions mySuspend() and myResume() will do this for our example form.
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.
As easy as this is, the trouble is that not everyone is using a browser that supports HTML 4.0, and until they do, people will still be able to interact with the example form. The following sections will explain how to overcome this with DHTML and JavaScript.
DHTML is a term coined to cover the combination of HTML, JavaScript, Cascading Style Sheets (CSS), and the browsers' Document Object Model (DOM). At present, only MSIE4 and NN4 support DHTML. With DHTML, you can dynamically update the current page being viewed in the browser without having to reload the document -- something unthinkable in earlier browsers -- except perhaps image-swapping in NN3.
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>
The JavaScript code required to show and hide a layer is relatively straigthforward. This code uses the relevant DOM (NN4 and MSIE have different DOMs) to alter the visibility property of the layer.
A downside to this technique is that because the form is now held within a layer, the JavaScript code used to disable a form in the HTML 4.0 version requires updating to access the form with a layer. To avoid this problem, you can replace the DIV and SPAN tags with the Netscape specific ILAYER tags:
<ILAYER ID="myLayer"> <!-- place form in here --> </ILAYER>
This results in a form being contained within a layer in NN4 but not for MSIE4, and therefore allows NN4 to hide the form and MSIE to disable the form. The JavaScript functions myResume() and mySuspend() can be coded to hide the layer in NN4 or attempt to disable the form for all other browsers.
To see what this looks like, you can view the revised form: Example 2. Note: this will now work in NN4 and MSIE4.
You may not be happy with the vanishing form, or you may require the form to be disabled in pre-version 4 browsers. With the assistance of JavaScript you can capture any interaction between the user and the form and then attempt to "undo" what the user has just done to the form. There is, however, no 100-percent perfect solution, as although the onBlur and onFocus event handlers initially seem to be an ideal solution, they will not work for select lists, and have varying degrees of success across the different versions of browsers still in use today.
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.
To see what the JavaScript solution looks like, you can view the form: Example 3. Note: the only field that cannot be protected is the File Upload field. Some of the protection will not work on older browsers.
You can combine all of the above techniques to disable a form on any JavaScript enabled browser.
Here's the complete solution: Example 4. Note: For any of these examples to work, they require a JavaScript enabled browser -- this therefore means that there are plenty of non-JavaScript enabled browsers that will not protect the form from the user. If you must have a form that is protected from the user, then you can always use JavaScript to actually output the form itself.
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.
Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2