Javascript: enabling and disabling form field elements
Here's another useful function for enabling and disabling your form elements using javascript. This function can be used to disable form elements when a user has submitted a form to stop them submitting it again.
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 the Javascript: enabling and disabling form field elements example.
Like this?
Archives
Categories
Comments (9)
What others have said about this post.
-
sangesh said:
-
Matt said:
-
Stewart said:
-
satya said:
-
Stewart said:
-
JoycleCycle said:
-
Anirban said:
-
Stewart said:
-
dranga said:

