onclick Event Not Running on HTML Select Drop Down

Question

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>

Duncan Thacker · Accepted Answer · 2019-01-28 14:39:49Z

<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>

ellipsis · Accepted Answer · 2019-01-28 14:47:04Z

4

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>

edited Jan 28, 2019 at 14:47

answered Jan 28, 2019 at 14:40

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

3 Comments

rydwolf Over a year ago

The onclick trigger will trigger when the select is clicked, as well as when an option is chosen.

SpudMcKenzie Over a year ago

Fantastic thanks I didn't realize I needed to use onchange, I'll mark this as the correct answer once the time parameters allow me to. Thanks again.

elraphty Over a year ago

It won't change the value, he is trying to change the value, after changing options so onclick won't work

rydwolf · Accepted Answer · 2019-01-28 14:40:52Z

0

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.

answered Jan 28, 2019 at 14:40

rydwolf

1,5581 gold badge14 silver badges32 bronze badges

2 Comments

Duncan Thacker Over a year ago

Didn't know about this, nice one!

rydwolf Over a year ago

I think onclick would trigger before anything was selected...let me check

Ajaz · Accepted Answer · 2019-01-28 14:47:46Z

0

I would recommend 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>

answered Jan 28, 2019 at 14:47

Ajaz

931 gold badge1 silver badge14 bronze badges

Collectives™ on Stack Overflow

onclick Event Not Running on HTML Select Drop Down

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related