How to trigger an event in an input field changed with Javascript

Question

REWRITE: I have a select field with an associated onchange event.

<select id='customer' onchange='loadRate(this.value)'>

At some point in my code, I assign a value to this select field with Javascript.

document.getElementById('customer').value = "Main St Packaging";

Why does this not trigger the onchange event? How do I fix it so that it does? Right now I am doing it by writing explicitly:

loadRate('Main St Packaging')

but I was wondering if there is a better way?

Can you not just make one function that updates all of the fields at once? — Matthew Riches
– Matthew Riches, Commented Jun 3, 2011 at 13:20
Well there are a lot of fields. That's basically what I did to get around this, but it seems pretty inefficient. — Daniel Kats
– Daniel Kats, Commented Jun 3, 2011 at 19:22
I'm not entirely sure if it's a duplicate, but the accepted answer seems relevant to your question: Trigger onchange event manually. — David Thomas
– David Thomas, Commented Jun 6, 2011 at 16:42

maerics · Accepted Answer · 2011-06-06 16:56:49Z

2

Try calling the "onchange" method explicitly:

var el = document.getElementById('customer');
el.value = "Main St Packaging";
el.onchange(); // Will run "loadRate(this.value)", per your HTML.

answered Jun 6, 2011 at 16:56

maerics

157k47 gold badges277 silver badges299 bronze badges

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

2 Comments

Thanks, JQuery for the win. I used $("#customer").change();

This throws an error "el.onchange is not a function", use el.onchange = <yourFunctionName> instead