grey out a field until a certain drop down option is selected

Question

I am doing a school task and I'm stuck.

I want to gray out the input field based on what is selected in the drop-down menu.

https://jsfiddle.net/xdvan6vf/

 function ccGrey() { if (document.getElementById("creditcard").onchane){ alert("this doesnt work very well") } } 

 <!-- Select Basic --> <div class="form-group"> <label class="col-md-16 control-label" for="payment-method">Payment Method</label> <div class="col-md-16"> <select id="payment-method" name="payment-method" class="form-control order-form"> <option value="1">Online</option> <option value="2">In Store</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label> <div class="col-md-16"> <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey"> </div> </div> 

Answer 1

I didn't understand what was your purpose but for handling select selected index changing,you must work on onChange on SELECT element not INPUT event like this:

 function selectChanged() { var x = document.getElementById("payment-method").value; document.getElementById("creditcard").disabled = (x == 1); } //Checking for initial run selectChanged(); 

 <!-- Select Basic --> <div class="form-group"> <label class="col-md-16 control-label" for="payment-method">Payment Method</label> <div class="col-md-16"> <select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()"> <option value="1">Online</option> <option value="2">In Store</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-16 control-label" for="creditcard">Credit Card Number</label> <div class="col-md-16"> <input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form"> </div> </div>