0

Is it possible to have a radio button's "onchange" event fire when the radio button is checked via an external function, and not by clicking on the radio button itself?

I have created a demo of my issue below, feel free to put the following in a text file and save it as .HTML:

<!DOCTYPE html>
<html>
<body>

<p>
This example demonstrates how the "onchange" event on radio buttons does not fire if the button is selected externally, i.e. by setting its "checked" value to "true".
<br />
You can test this by clicking one of the radio buttons invididually, then by clicking the "Select 1" or "Select 2" buttons.
<br />
The radio buttons have an "onchange" event registered such that an alert box should pop up when one of them is selected.
</p>

1: <input type="radio" value="1" id="1" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 1" onclick="document.getElementById('1').checked=true;" /><br />
2: <input type="radio" value="2" id="2" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 2" onclick="document.getElementById('2').checked=true;" />

<script>
function myFunction() {
    alert("A radio button was selected.");
}
</script>

</body>
</html>

This is not a duplicate of How to trigger event in JavaScript?, and this is how:

If I were to fire the event manually, that would require me to look at the radio button and compared to the last time I looked at it, and fire the "onchange" event accordingly. The issue is that the radio button can be selected through a multitude of ways (click, keyboard press, touch/tap, external function etc) and rather than monitor each avenue of selection, I'd rather have the input element do that for me. If I can achieve what I am asking in the question, it will simplify this.

Community
  • 1
  • 1
user3163495
  • 2,425
  • 2
  • 26
  • 43
  • 1
    Possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) – jmoerdyk May 12 '17 at 17:07
  • http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript or if you use jQuery you can do it easily with .trigger('change') – Samuil Petrov May 12 '17 at 17:08
  • @jmoerdyk If I were to fire the event manually, that would require me to look at the radio button and compared to the last time I looked at it, and fire the "onchange" event accordingly. The issue is that the radio button can be selected through a multitude of ways (click, keyboard press, touch/tap, external function etc) and rather than monitor each avenue of selection, I'd rather have the input element do that for me. – user3163495 May 12 '17 at 17:13
  • @user3163495 if you have jQuery, [this answer](http://stackoverflow.com/a/8838902/7605753) creates a new handler for both the change and click events. – Stephen S May 12 '17 at 17:29

1 Answers1

3

Use .click()

<input type="button" value="Select 2" onclick="document.getElementById('2').click();" />

You should avoid using inline js.

Abdullah Seba
  • 354
  • 2
  • 6
  • 16