javascript event not getting triggered

Question

I have a dropdown for number of travelers.

When I change the value (say select 2), it displays some more dropdowns (in this case 2 dropdowns) for entering the age of travelers.

This is existing functionality. Now I have created another dropdown, here I have written an onChange function that sets the value of travelers:

document.getElementById("travellers").value="1";

I want the additional dropdowns for the age to appear on their own which does not happen.

How can I effect this to happen using jQuery/JavaScript?

@kevinabelita An edit that makes a few things italics and once sentence bold? Are you serious? Talk about meaningless edits. — Tomalak
– Tomalak, Commented May 5, 2014 at 7:15
@Tomalak, I wonder who has approved that edit. Edit approval on SO should be revised — Walter Tross
– Walter Tross, Commented May 5, 2014 at 7:18
when i was formatting the question, it was still on a single paragraph, I did not know that it was already formatted after i clicked edit, so that change was small — user1978142
– user1978142, Commented May 5, 2014 at 7:30
@kevinabelita Curious you hit exactly the same paragraph format as the edit before you. Also, if you see the "this has been edited" popup while you're editing yourself, you're supposed to refresh instead of blindly overwriting a previous edit. — Tomalak
– Tomalak, Commented May 5, 2014 at 8:39

Satpal · Accepted Answer · 2014-05-05 07:20:37Z

2

When you modifies value programatically event will not fire. You need to trigger event.

Using vanilla JS

var select = document.getElementById("travellers");
//fire the event
if("createEvent" in document) { //NON IE browsers
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    select.dispatchEvent(evt);
} else { //IE
    var evt = document.createEventObject();
    select.fireEvent("onchange", evt);
}

As you have tagged your question with jQuery you can use .trigger()

$("#travellers").trigger("change");

edited May 5, 2014 at 7:20

answered May 5, 2014 at 7:14

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cerbrus Over a year ago

Since this question is also tagged with jQuery, I'd suggest adding the jQuery equivalent to your answer.

Ramar Over a year ago

@Satpal now i understand that i have just changed the value and not triggered the event. This one liner works like magic. Thanks.

Ramar Over a year ago

@Satpal when i use $("#travellers").trigger("change"); today , i get error, "Uncaught TypeError: Property '$' of object [object Object] is not a function".

Collectives™ on Stack Overflow

javascript event not getting triggered

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related