javascript enable and disable a combobox

Question

I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.

function makeEnable(value){ if(value=="rep4"){ var x=document.getElementById("dale") x.disabled=false }else{ var x=document.getElementById("dale") x.disabled=true } } </script> </script> <select onChange="makeEnable(value)" name="repSelect"> <option value="rep1">Employee</option> <option value="rep2">Category Reasons Overall </option> <option value="rep3">Department Overall </option> <option value="rep4">Reasons Specific Categorized </option>
</select> <select name="dale"> <option value="rep1">dale</option> </select> <input class="button" type="submit" value="Generar Reporte" >
</form>

My modification But dosent work

function makeEnable(){ var e = document.getElementById("repSelect"); var strUser = e.options[e.selectedIndex].value; if(strUser=="rep4"){ document.getElementById("dale").disabled=false; }else{ document.getElementById("dale").disabled=true; } }

Solution

You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:

<select id="dale" name="dale">

You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:

<select onChange="makeEnable(this.value)" name="repSelect">

You can also substantially simplify your function as follows:

function makeEnable(value){
    document.getElementById("dale").disabled = value!="rep4";
}

Demo: http://jsfiddle.net/3t16p5p9/

EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:

$(document).ready(function() {
    $("select[name=repSelect]").change(function() {
        $("#dale").prop("disabled", this.value!="rep4");
    }).change();
});

This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).

Demo: http://jsfiddle.net/3t16p5p9/2/

Comments

[fejese]

Include the error that you get.

[Ifrahim Hernandez]

yes but i get an error when im passing my variable trough the parameter

[nnnnnn]

user3263194 - Why would this work any better than using the variable x as shown in the question?

[Ifrahim Hernandez]

can u put it as an answer plz is that i dont get it sorry

[nnnnnn]

It works in the demo I provided. Do you get any errors in your browsers console? Are you sure the function is actually getting called at all?

[nnnnnn]

The simplest way is just to add a disabled attribute in the html:jsfiddle.net/3t16p5p9/1