Javascript- Onchange Event Handler

The Onchange Event Handler in Javascript is an event handler that is triggered when a user changes something within a form element.

An example of this is a drop-down selection menu, where a user selects a new option from a list of choices. The moment the user selects a new option, the onchange event handler is triggered.

The onchange event handler is useful in situations where we want a user to be aware that s/he has made a change. We can process information to the user such as sending the message, "You have successfully made a change" when a user makes a change, such as select a new option.

An example of the onchange event hanlder in use is shown below in the drop-down selection menu:

If you use the above selection drop-down list above and select a new option, an alert pop-up box will appear, stating, "You have made a new selection change. This change has been successfully made."

This is an example of the onchange event handler in a form element. If a user selects a new option, the onchange event handler detects these changes and can be programmed to do whatever the programmer wants it to do based on this event occurring. In this case, it is programmed so that an alert pop-up box appears telling the user that the change s/he made has been successfully. In actuality, however, we can program it so that anything can occur based on this event of a change to a form.

Code

The code to create the above form is:

<label>What Fruit Do You Want to Eat?</label>
<form>
<select id="selFruit" onchange= "window.alert('You have made a new selection change. This change has been successfully made.');">
<option value="Grapes">Grapes</option>
<option value="Tomatoes">Tomatoes</option>
<option value="Dates">Dates</option>
<option value="Honeydew">Honeydew</option>
<option value="Cantaloupe">Cantaloupe</option>
</select>
</form>

To use the onchange event handler, we add it to the select attribute of the select drop-down list. Since we are making it so that it creates an alert pop-up box when called, the code uses the alert() function.

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

Javascript- Onchange Event Handler

Code