how do I suppress certain HTML input fields based on drop down selection?

Question

Hypothetical situation:

I have a form that has 11 fields, fields 1 through 11.

Let's say field 1 is a drop down with 3 values: "A", "B", "C"

How do I use HTML/JavaScript to say that:

if user selects "A", then only fields 2,3,4 are editable (the rest are not)

if user selects "B", then only fields 5,6,7,8 are editable (the rest are not)

if user selects "C", then only fields 9,10,11 are editable (the rest are not.

Thanks!

Answer 1

You can approach the elements within javascript and do the following:

document.getElementById(' ... ').disabled = true;

More information can be found on: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Answer 2

var selectControl = [['input1', 'input2', 'input3'],
                 ['input4', 'input5', 'input6', 'input7'],
                 ['input8', 'input9', 'input10', 'input11']];

var FormControl = {
init: function () {
    var myform = document.getElementById("myform");
    var myselect = myform.getElementsByTagName('select')[0];
    var defaultOption = myselect.value;

    myselect.addEventListener('change', FormControl.changeSelect, false );

    // first load
    FormControl.changeFields( defaultOption );
},

changeSelect: function ( event ) {
    var option = this.value;

    FormControl.changeFields ( option );
},

disableAllInputs: function ( ) {
    var myform = document.getElementById("myform");
    var inputs = myform.getElementsByTagName("input");

    for ( var i = 0; i < inputs.length; i++ ) 
        inputs[i].disabled = true;
},

changeFields: function ( optionSelected ) {
    var enableInputs = selectControl[optionSelected];

    // disable everything
    FormControl.disableAllInputs();

    // enable only the ones selected
    for ( var i = 0; i < enableInputs.length; i++ ) 
        document.getElementById( enableInputs[i]).disabled = false;
}
};

FormControl.init();

jsFiddle