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, Jun 03 '11 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, Jun 03 '11 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](http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually). — David Thomas, Jun 06 '11 at 16:42

score 2 · Accepted Answer · answered Jun 06 '11 at 16:56

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 06 '11 at 16:56

maerics

1

Thanks, JQuery for the win. I used $("#customer").change(); – Daniel Kats Jun 28 '11 at 13:26
This throws an error "el.onchange is not a function", use `el.onchange = ` instead – Mario Nezmah Nov 21 '19 at 11:42

1 Answers1