CODEWITHSUNDEEP
javascript
ssss
ssss

Reputation: 76

Enable dropdown after typing all the values in textbox

In my HTML form, there are 2 textbox and one dropdown.

While loading the page, dropdown should not be editable(ie: disabled)

After filling all the textbox,the dropdown should be editable.

Please give an idea to solve this in javascript.

Upvotes: 0

Views: 386

Answers (2)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Check both input elements value whenever keyup event is fired. If both the input elements have no inputs then disable the select element. Else enable it. Try this way,

javaScript : 

function SetControlState(){
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].value.length == 0){
           selectddl.disabled = true;
           break;
        } else{
            selectddl.disabled = false;
        }
    }
}

var selectddl = document.getElementById("dropdl");
var inputs = document.getElementsByTagName('input');
var isEnabled = false;
for(var i = 0; i < inputs.length; i++){
    if(inputs[i].id == 'first' || inputs[i].id == 'second'){
        inputs[i].onkeyup = function(){
            SetControlState();
        };
    }
}

HTML : 

<select name="ddl" id="dropdl" disabled="true">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

<input type="text" id="first"/>
<input type="text" id="second"/>

jsFiddle

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Try like this

HTML

<input type="text" id="text1" onblur="myFunction()"> 
<input type="text" id="text2" onblur="myFunction()">
<select id="select1" disabled>
   <option>value</option>
</select>

Javascript

function myFunction() {
    if (document.getElementById("text1").value.length > 0 && document.getElementById("text2").value.length > 0) {
        document.getElementById("select1").disabled = false;
    } else {
        document.getElementById("select1").disabled = true;
    }
}

Upvotes: 2

Related Questions