I currently have a HTML select drop down with six options all I'm trying to achieve is when the option "Other" is selected a javascript alert appears, but for some reason I cannot get this to work.

I've tried moving the onclick to the select tag rather than the option tag, and moving the alert outside the parameters which allows it to appear as soon as the drop down is clicked which worked but isn't what I'm trying to achieve.

function otherPayment() {
  var paymentType = document.getElementById("paymentType").value;
  if (paymentType == "Other") {
    alert("test");
  }
}

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" required>
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option onclick="otherPayment()" value="Other">Other</option>
  </select>
</div>

I currently have a HTML select drop down with six options all I'm trying to achieve is when the option "Other" is selected a javascript alert appears, but for some reason I cannot get this to work.

I've tried moving the onclick to the select tag rather than the option tag, and moving the alert outside the parameters which allows it to appear as soon as the drop down is clicked which worked but isn't what I'm trying to achieve.

function otherPayment() {
  var paymentType = document.getElementById("paymentType").value;
  if (paymentType == "Other") {
    alert("test");
  }
}

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" required>
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option onclick="otherPayment()" value="Other">Other</option>
  </select>
</div>

• javascript
• html

4 Answers 4

<option> elements don't behave like normal HTML elements, so onclick doesn't do anything.

The easiest way to do this is to use the onchange event of the select, and then inspect the newly selected element, like this:

function handlePaymentChange(event) {
  var paymentType = event.target.value;
  if (paymentType == "Other") {
    alert("test");
  }
}

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" required onchange="handlePaymentChange(event)">
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option value="Other">Other</option>
  </select>
</div>

You have to use onchange on the select tag not on the option tag.

function otherPayment() {
  var paymentType = document.getElementById("paymentType").value;
  if (paymentType == "Other") {
    alert("test");
  }
}

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" required onchange="otherPayment()">
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option  value="Other">Other</option>
  </select>
</div>

The easiest way to do this would be to use onselect:

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" onselect="otherPayment()" required>
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option value="Other">Other</option>
  </select>
</div>

Since there is already an if/else, it should work well.

I would remend to bind the onchange event of the drop down instead of click event of the option.

 <select class="form-control" id="paymentType" onchange="otherPayment()" name="paymentType" required>