Knowledge Base Articles » KB100212: How to Disable Form Elements in an HTML Page.
There are occasions when it is desirable to be able to disable at runtime specific form elements on a form displayed on a Web page. By disable we mean that the form element is still visible, but that you cannot successfully click it or enter data. Fortunately, this is very easy to do with Internet Explorer (IE). The real challenge is to able to disable form elements when the client is using one of 4.X versions of Netscape Navigator. The Guru has carefully examined this problem and offers the following solutions.EXAMPLE
First, please take time to examine this example using both Internet Explorer 4.X or 5.0 and Netscape Navigator 4.X. By clicking on the "Enable/Disable Form Elements" button, you can alternately enable and disable the displayed form elements. In IE, note that most of the elements take on a grey tone when they are disabled. There is no color change with Navigator 4.X.
When the form elements are enabled and you click on one, an alert box will be displayed to confirm that the element is functioning.
Enable/Disable Form Element Example
In our example, we have three JavaScript functions. The "Enable/Disable Form Elements" button, at the bottom of the example, calls the ToggleAll() function which does all of the work:
function ToggleAll ()
{
// Each form element that you wish to disable must be referred
// to specifically by its name
Toggle(document.nav.text1)
Toggle(document.nav.password1)
Toggle(document.nav.ta1)
Toggle(document.nav.select1)
Toggle(document.nav.select2)
Toggle(document.nav.select3)
Toggle(document.nav.check1)
Toggle(document.nav.reset1)
Toggle(document.nav.submit1)
Toggle(document.nav.but1)
Toggle(document.nav.radio1[0])
Toggle(document.nav.radio1[1])
Toggle(document.nav.file1)
// For image input elements, you must use document.all
// or document.getElementById
if (document.all)
Toggle(document.all.image1)
// If we're on netscape, enable/disable the form, since the image
// input element cannot be disabled using event-handlers.
if (document.layers)
document.nav.disabled = !document.nav.disabled
}
The ToggleAll() function, calls the Toggle(objElement) function in order to turn the disabled property on and off. The Toggle(objElement) function also handles the special case of a select pull-down form element:
function Toggle(objElement)
{
// Set the disabled property. If we're in IE, this will
// automatically disable the elements. If we're on Netscape,
// this will create a custom property which we use in the
//event-handlers to determine the status of the elements.
objElement.disabled = (!objElement.disabled)
// If this is a select element, then save its status, so we can restore it
// in the onchange event-handler, thus effectively disabling the element.
if (document.layers)
{
if (objElement.disabled && objElement.type.substr(0,6) == "select")
{
for (intI=0; intI<objElement.options.length; intI++)
{
objElement.options[intI].frozenStatus = objElement.options[intI].selected
}
}
}
}
The ChangeSelect(objTarget) function is called specifically to disable the select list for Netscape Navigator:
function ChangeSelect(objTarget)
{
if (objTarget.disabled)
{
for (intI=0; intI<objTarget.options.length; intI++)
{
objTarget.options[intI].selected = objTarget.options[intI].frozenStatus
}
return false;
}
else
{
// Place here any default event-handler code that you may wish to run
// or remove this else{} statement
}
}
This is the code for the button that enables/disables the form elements by calling the ToggleAll() function.
<input type="button" onclick="ToggleAll()" name="ToggleButton" value="Enable/Disable Form Elements">
INTERNET EXPLORER 4.X AND 5.0
In Internet Explorer, you can use the disabled property to disable all form elements. However, there is one exception that requires special attention.
Image Input
The exception is, <input type="image" ...>. (An image form element uses an image as a submit button.) In Internet Explorer, image form elements are not accessible through the form element. Therefore, the disabled property must be set by getting a reference to the image element using either document.all (IE 4.X) or document.getElementById (IE 5.0).
NETSCAPE NAVIGATOR 4.X
Unfortunately, Netscape does not recognize the disabled property. Instead, you must use a variety of techniques to disable the various form elements.
Text, Password, and TextArea
In Netscape, the text, password, and textarea form elements can be disabled using the onfocus-blur method. The empty else clause in the onfocus event-handler is where you can place any code you wish to run when the element receives the focus while it is enabled.
Text:
<input type="text" name="text1" value="five" onfocus="if (this.disabled) this.blur(); else {}">
Password:
<input type="password" name="password1" onfocus="if (this.disabled) this.blur(); else {}">
Textarea:
<textarea name="ta1" onfocus="if (this.disabled) this.blur(); else {}"> </textarea>
Select Lists
In Netscape, select lists can be effectively disabled by setting the onchange event-handler to the ChangeSelect() function (displayed above). This function essentially catches the change event, and resets the lists status to what it was when the list was first disabled.
Single-select (dropdown):
<select name="select1" id="select1" onchange="ChangeSelect(this)">
<option> one
<option> two
<option> three
<option> four
</select>
Single-select (scrolling):
<select name="select2" id="select2" size="2" onchange="ChangeSelect(this)">
<option> one
<option> two
<option> three
<option> four
</select>
Multiple-select:
<select name="select3" id="select3" multiple onchange="ChangeSelect(this)">
<option> one
<option> two
<option> three
<option> four
</select>
Button, Checkbox, Reset Button, and Submit Button
In Netscape, the button, checkbox, reset button, and the submit button can be disabled using the onclick method. The programmer should replace the else clause in the onclick code below with their default onclick event-handling code (or simply remove the else clause if they do not need to implement an onclick handler).
Button:
<input type="button" onclick="if (this.disabled) return false; else alert('clicked')" name="but1" id="button1" value="test button">
Checkbox:
<input type="checkbox" onclick="if (this.disabled) return false; else alert('clicked')" name="check1" id="check1" value="one">
Reset button:
<input type="reset" onclick="if (this.disabled) return false; else alert('clicked')" name="reset1" id="button2">
Submit button:
<input type="submit" onclick="if (this.disabled) return false; else alert('clicked')" name=submit1 id=submit1 value="Submit">
Radio Buttons
In Netscape, radio buttons can be disabled using the onmousedown method. Again, the programmer may insert their own default onmousedown event-handling code in place of the alert('clicked') statements.
Radio button one:
<input id="rad1" type="radio" name="radio1" value="three" onmousedown="if (this.disabled) return false; else { this.checked = true; alert('clicked')}">
Radio button two:
<input id="rad2" type="radio" name="radio1" value="four" onmousedown="if (this.disabled) return false; else { this.checked = true; alert('clicked')}">
Image Input
In Netscape, image input elements do not support any appropriate event-handlers, so they must be disabled by overriding the onsubmit event-handler for the form in which they are contained.
Image input element:
<form name="myform" action="myasp.asp" onsubmit="if (this.disabled) return false; else alert('submitting')">
...
<input type="image" id="image1" name="image1" src="/https/www.devguru.com/sites/all/themes/devguru/images/guru.gif">
</form>
File Input
In Netscape, there does not appear to be a way to disable the file input form element. The following code will only disable in IE.
File input element:
<input type="file" name="file1" onclick="if (this.disabled) return false; else alert('clicked')">
