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.

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>

The function is not called. `onchane` is a typo. The select has no ID... — rybo111, May 14 '17 at 07:30
Related: [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Jonathan Lonowski, May 14 '17 at 07:31
i cant even seem to get an alert to fire: `function ccGrey() { alert("no work") } } ` AND ` ` — Roland Warburton, May 14 '17 at 07:39

score 0 · Accepted Answer · answered May 14 '17 at 07:57

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>

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

1 Answers1