Programmatically firing the onchange event of an HTML select element - javascript

How can I fire the onchange event of an HTML Select element by code.
The following only selects a list item but doesn't seem to fire the onchange event?
options[index].selected = true;

If the event is hoked up directly via onchange, you can invoke the handler by calling that handler, like this:
mySelect.options[index].selected = true;
mySelect.onchange();
...if it's not rigged up that way, then different approaches are appropriate depending on how you're binding, and more information about how your onchange handler(s) are attached would help.

Related

Jquery stop change event on manual trigger

I have bound a change event on "select box" which call when user changes select box value manually. But I want to stop change event call when we trigger change event by javascript like $(element).trigger('change').
Please help
use the off function to remove an event listener.
$(element).off('change')
Trigger method have another parameter (extraParameter ) and put your data. In handler check extraParameter to findout it is manually or with javascript code.
$(element).trigger('change',{'isTriggeredBySystem':true})
jQuery trigger

Fire onclick on <select> element but not on <option>

My element updates its options using the onclick() listener when clicked. The problem is the listener is firing when an option is clicked as well, so the user is unable to select anything in the updated list.
groupSelect.onclick = function() {
PopulateList();
}
I'd like to run my function only when the select element is clicked(when the menu has not dropped down yet) but not when a specific option is clicked. How can I do so? I'm writing the JS part using NodeJS.
Events will bubble up the hierarchy, so a click on an option will also trigger any events bound to its parent select.
This is fixed by stopping propagation of the event on your option listener
$('option').click(function(event){
event.stopPropagation();
//rest of code
})

Chrome Extension - Trigger events on content_scripts using JQuery

I wrote a Chrome Extension that automatically fills some registration forms. There are some select fields that need to be triggered on "change" event in order to start some Ajax calls.
First I use JQuery attr or val to change the value of the select field, and than I use .trigger to invoke the "change" event, but this last one doesn't work.
Example:
I want to select the option that contains the word "London" and invoke
the change element in order to start some operations of the native
code that have some listeners on "change" event
jQuery("#SelectElement option:contains('London')").attr("selected", "selected");
jQuery("#SelectElement").trigger("change"); <--- not works
I tried also:
jQuery("#SelectElement option:containt('London')").attr("selected", "selected").change();
But if I try this code on console, it works.
Suggestions?
I had the same problem and as far as I know it's because of something called framework event listeners. that you cannot trigger from your code by jquery! but the solution is trigger the event this way:
$(selector)[0].dispatchEvent(new Event("eventName"))
In my case,
var event = new CustomEvent('change');
did not work.
I had to initialize the event like this:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("keyup", true, true);
First arg 'bubbles' should be true so the event should bubble up through the event chain.
event.initEvent(type, bubbles, cancelable);
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

Event managment: Replace click event

I have a button with a click event (from a 3. party library) which submits a form. I like to remove the click event, add my own function and call the original event after a validation.
I thought i just add an event.stopImmediatePropagation(); but that did not work. Maybe because of the order the events where added(?).
Is the another way to manage the event execution?
Or how can I get the old event to do something like this:
originalClickEvent = $('#button').doSomeMagicAndGetTheEvent('click');
$('#button').unbind();
$('#button').bind('click', function (event) {
if (valid()) originalClickEvent();
});
Look here Remove all JavaScript event listeners of an element and its children?
After you remove the event listeners you can attach your custom event.
If I've understood you correctly this is the effect you're searching for: http://jsfiddle.net/ftGHq/
In case the click event is just bound to one function you could overwrite that function:
var oldFunction = theOldFunction;
function myFunction(control) {
oldFunction(control);
}
$('#button').unbind();
$('#button').click(myFunction);

simulate onChange event to fire on HTML input box

I have jQuery that uses the change event from a selection box to update a input box on the form. I need the input box to fire it's change event when I update it's value.
This link on MSDN shows a way to simulate the click event. Is there a technique I can use to simulate a change event?
You can use trigger():
$('#input-id').trigger('change');
You can trigger change event handler. You can simply call it like that:
jQuery('#my_field').change();
which is a shortcut to:
jQuery('#my_field').trigger('change');
See more on the documentation of .change() (its third, attribute-less variation).
This should theoretically do it:
<input id="textinput" value="somevalue" name="somename" />
<script type="text/javascript">
function doSomethingOnInputChange(e) {
console.log('input on change');
}
$('#textinput').bind('change', doSomethingOnInputChange);
$('#textinput').trigger('change');
</script>
It binds an event handler to a custom 'change' event and then fires the event.
There are several good jQuery based answers already (though you didn't use a jQuery tag) but there's another approach that can work for you if you're binding the change event to call a function.
Say you've already bound the change event to the doSomethingOnInputChange function as in Vlad's answer...
Rather than simulating an event by triggering 'change' you can directly call doSomethingOnInputChange - that is, instead of doing:
$('#textinput').trigger('change')
your javascript just makes a call to the same function that gets called anyway when you trigger the event:
doSomethingOnInputChange( ... );
You may or may not want to pass the #textinput DOM element as a parameter in a direct call, or an event parameter (but providing your own event parameter makes this approach hardly worthwhile) -- those depend on what you need to do in the function.

Categories