Question

I have a list of option inside select list, also I have textfield that contain the option value when selected.
i would like to make the textfield disable as default and when i’m selecting one of the options – the textfield will be enable.
Can someone direct me to a simiar example?

thanks

Answer 1

Here is an example using plain JavaScript jsfiddle:

HTML:

<select id='myselect'>
    <option value='none'>none</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
</select>
<input type='text' value='' name='mytext' id='mytext' disabled />
<button value='add' id='addbtn' name='addbtn'>add</button>

We started by disabled the input textfield.

var myselect = document.getElementById('myselect');

function createOption() {
    var currentText = document.getElementById('mytext').value;
    var objOption = document.createElement("option");
    objOption.text = currentText;
    objOption.value = currentText;

    //myselect.add(objOption);
    myselect.options.add(objOption);
}

document.getElementById('addbtn').onclick = createOption;

myselect.onchange = function() {
    var mytextfield = document.getElementById('mytext');
    if (myselect.value == 'none'){
        mytextfield.value = '';
        mytextfield.disabled = true;
    }else {
        mytextfield.value = myselect.value;
        mytextfield.disabled = false;
    }
}

Using the example on the previous post we basically add an onchange state to the select tag so when an option is selected we set the textfield’s value to what is currently selected, and then basically set the textfield’s disable to false. Thus, enable the textfield when an option is selected. Additionally, i added an option called ‘none’ so when user selects none it’ll diable the textfield.