You are here: irt.org | FAQ | JavaScript | Form | 3.6 | Q302 [ previous next ]
There is no 100% perfect solution to this problem. The onBlur and onFocus event handlers although initially an ideal solution, will not work for select lists, and have varying degrees of success across the different browser versions.
The following demonstrates the best that can be done:
<SCRIPT LANGUAGE="JavaScript"><!--
var on = true;
function doingit() {
}
function myCopyData() {
document.myFormCopy.myPasswordCopy.value = document.myForm.myPassword.value;
for (var i=0;i < document.myForm.myRadio.length;i++)
if (document.myForm.myRadio[i].checked)
document.myFormCopy.myRadioCopy.value = i;
document.myFormCopy.mySelectCopy.value = document.myForm.mySelect.selectedIndex;
document.myFormCopy.myTextCopy.value = document.myForm.myText.value;
document.myFormCopy.myTextareaCopy.value = document.myForm.myTextarea.value;
}
//--></SCRIPT>
<FORM NAME="myForm" onSubmit="if (on) return doingit(); else return on">
<PRE>
Button <INPUT TYPE="BUTTON" VALUE="Button" onClick="if (on)
return doingit(); else return on">
Checkbox <INPUT TYPE="CHECKBOX" onClick="if (on) doingit(); else this.checked=!this.checked">
File <INPUT TYPE="FILE" onClick="if (on) doingit()">
Hidden <INPUT TYPE="HIDDEN" VALUE="hidden value">
Password <INPUT TYPE="PASSWORD" NAME="myPassword" onChange="if (on)
doingit();else this.value=document.myFormCopy.myPasswordCopy.value">
Radio <INPUT TYPE="RADIO" NAME="myRadio" onClick="if (on) doingit(); else document.myForm.myRadio[document.myFormCopy.myRadioCopy.value].checked=true"><INPUT
TYPE="RADIO" NAME="myRadio" onClick="if (on) doingit(); else document.myForm.myRadio[document.myFormCopy.myRadioCopy.value].checked=true">
Reset object <INPUT TYPE="RESET" onClick="if (on) return doingit(); else return on">
Select object <SELECT NAME="mySelect" onChange="if (on) doingit();else this[document.myFormCopy.mySelectCopy.value].selected=true"><OPTION>1<OPTION>2<OPTION>3</SELECT>
Submit object <INPUT TYPE="SUBMIT" onClick="if (on) return doingit(); else return on">
Text <INPUT TYPE="TEXT" NAME="myText" onChange="if (on)
doingit();else this.value=document.myFormCopy.myTextCopy.value">
Textarea <TEXTAREA NAME="myTextarea" onChange="if (on) doingit();else this.value=document.myFormCopy.myTextareaCopy.value"></TEXTAREA>
<INPUT TYPE="BUTTON" VALUE="SUSPEND" onClick="if (on) {on=false;myCopyData()}"> <INPUT TYPE="BUTTON" VALUE="RESUME" onClick="on=true">
</PRE>
</FORM>
<FORM NAME="myFormCopy">
<INPUT TYPE="HIDDEN" NAME="myPasswordCopy">
<INPUT TYPE="HIDDEN" NAME="myRadioCopy">
<INPUT TYPE="HIDDEN" NAME="mySelectCopy">
<INPUT TYPE="HIDDEN" NAME="myTextCopy">
<INPUT TYPE="HIDDEN" NAME="myTextareaCopy">
</FORM>The doingit() function can be removed. Its just used to show that if the form is not disabled that something does happen. Initially the form is enabled. Press the Suspend button to disable the form. Note the only field that cannot be protected in the File Upload field. Some of the protection will fail on older browsers
The HTML 4.0 Recommendation includes from attributes, that when supported by browsers, will enable you to easily perform blocking of access to form fields:
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.
At the moment only Internet Explorer 4 supports HTML 4.0. So the following is only suitable for Internet Explorer 4:
<FORM NAME="html40">
<PRE>
Button <INPUT NAME="button" DISABLED TYPE="BUTTON"
VALUE="Button">
Checkbox <INPUT NAME="checkbox" DISABLED TYPE="CHECKBOX">
FileUpload <INPUT NAME="file" DISABLED TYPE="FILE">
Hidden <INPUT NAME="hidden" DISABLED TYPE="HIDDEN" VALUE="hidden
value">
Password <INPUT NAME="password" DISABLED TYPE="PASSWORD">
Radio <INPUT DISABLED TYPE="RADIO" NAME="myRadio"><INPUT
DISABLED TYPE="RADIO" NAME="myRadio">
Reset object <INPUT NAME="reset" DISABLED TYPE="RESET">
Select object <SELECT NAME="select"
DISABLED><OPTION>1<OPTION>2<OPTION>3</SELECT>
Submit object <INPUT NAME="submit" DISABLED TYPE="SUBMIT">
Text <INPUT NAME="text" DISABLED TYPE="TEXT">
Textarea <TEXTAREA NAME="textarea" DISABLED></TEXTAREA>
<SCRIPT LANGUAGE="JavaScript"><!--
function mySuspend() {
document.html40.button.disabled=true;
document.html40.checkbox.disabled=true;
document.html40.file.disabled=true;
document.html40.hidden.disabled=true;
document.html40.password.disabled=true;
for (var i=0;i < document.html40.myRadio.length;i++)
document.html40.myRadio[i].disabled=true;
document.html40.reset.disabled=true;
document.html40.select.disabled=true;
document.html40.submit.disabled=true;
document.html40.text.disabled=true;
document.html40.textarea.disabled=true;
document.html40.suspend.disabled=true;
document.html40.resume.disabled=false;
}
function myResume() {
document.html40.button.disabled=false;
document.html40.checkbox.disabled=false;
document.html40.file.disabled=false;
document.html40.hidden.disabled=false;
document.html40.password.disabled=false;
for (var i=0;i < document.html40.myRadio.length;i++)
document.html40.myRadio[i].disabled=false;
document.html40.reset.disabled=false;
document.html40.select.disabled=false;
document.html40.submit.disabled=false;
document.html40.text.disabled=false;
document.html40.textarea.disabled=false;
document.html40.suspend.disabled=false;
document.html40.resume.disabled=true;
}
//--></SCRIPT>
<INPUT NAME="suspend" DISABLED TYPE="BUTTON"
VALUE="SUSPEND" onClick="mySuspend()"> <INPUT NAME="resume"
TYPE="BUTTON" VALUE="RESUME" onClick="myResume()">
</PRE>
</FORM>