Disabling all form elements
HTML form elements have an attribute called disabled that can be set using javascript. If you are setting it in HTML you can use disabled="disabled"
but if you are using javascript you can simply set the property to true
or false
.
/* code from qodo.co.uk */
function toggleFormElements(bDisabled) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = bDisabled;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = bDisabled;
}
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].disabled = bDisabled;
}
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = bDisabled;
}
}
Disabling a single form element
But what if you just want to disable a single form element? Well, it's dead easy. Simply give your form element a unique id: -
<input type="text" name="age" id="age" />
And using JavaScript, you can disable that element quite easily using -
document.getElementById("age").disabled = true;
Download
Download the Javascript: enabling and disabling form field elements example.
Got something to say?
Join the discussion! You know how these things work; enter your details and comments below and be heard.
Comments 9