onchange Event

DOM Events Event Object

Definition and Usage

An onchange event occurs when the value of an element changes.

For radio buttons and checkboxes, an onchange event occurs when the selected state changes.

Tip:This event is similar to oninput Event. The difference is that the oninput event occurs immediately after the element value changes, while onchange occurs after the element loses focus and the content changes. Another difference is that the onchange event also applies to <select> elements.

Example

Example 1

Execute JavaScript when the user changes the selected option of the <select> element:

<select onchange="myFunction()">

Try it yourself

Example 2

Execute JavaScript when the user modifies the content of the input field:

<input type="text" onchange="myFunction()">

Try it yourself

Syntax

In HTML:

<element onchange="myScript">

Try it yourself

In JavaScript:

object.onchange = function(){myScript};

Try it yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("change", myScript);

Try it yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical details

Bubbling: Support
Cancelable: Not supported
Event type: Event
Supported HTML tags: <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">, <select> and <textarea>
DOM Version: Level 2 Events

Browser Support

Events Chrome IE Firefox Safari Opera
onchange Support Support Support Support Support
DOM Events Event Object