Javascript: enabling and disabling form field elements

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;

• < Adobe Live 2007 - London
• Javascript: Swapping select box options >