In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onchange

onchange event | change event

Browser support:

Occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus.

How to register:

In HTML:

In JavaScript:

object.onchange = handler;

object.addEventListener ("change", handler, useCapture);

9

object.attachEvent ("onchange", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	Event

The onchange event works differently on elements:

select	The onchange event is fired when the selection has changed.
input:checkbox and input:radio	In Firefox, Opera, Google Chrome and Safari: the onchange event is fired when the checked state has changed. In Internet Explorer: the onchange event is fired when the element loses the focus and the checked state has changed since the last time the element got the focus. For a cross-browser solution to detect when the checked state has changed, use the onclick event instead. The page for the onclick event contains examples that demonstrate that.
textarea, input:password, input:search and input:text	The onchange event is fired when the element loses the focus and the contents have changed since the last time the element got the focus. To detect when the contents have changed, use the onpropertychange event in Internet Explorer and the oninput event in Firefox, Opera, Google Chrome and Safari (and in Internet Explorer from version 9). In Google Chrome, Safari and in Internet Explorer from version 9, the textInput event can also be used. The pages for the onpropertychange, oninput and textInput events contain examples that demonstrate that.
input:file	The onchange event is fired when the contents have changed. If the user types the path (does not use the Browse button) in Internet Explorer, then the onchange event is fired only when the element loses the focus. Therefore use the onpropertychange event to detect the modification in Internet Explorer.
input:range	The onchange event is fired when the value has changed.

Example HTML code 1:

This example illustrates the use of the onchange event for a select element:

<head>
    <script type="text/javascript">
        function OnSelectionChange (select) {
            var selectedOption = select.options[select.selectedIndex];
            alert ("The selected option is " + selectedOption.value);
        }
    </script>
</head>
<body>
    Select an item from the following list:<br />
    <select onchange="OnSelectionChange (this)">
        <option value="Apple" />Apple
        <option value="Pear" />Pear
        <option value="Peach" />Peach
    </select>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example uses the onchange event and the Date object to calculate the elapsed time between the selected start and end time:

<head>
    <script type="text/javascript">
        function CalculateElapsedTime () {
            var startHSelect = document.getElementById ("starttimehour");
            var startMSelect = document.getElementById ("starttimemin");
            var endHSelect = document.getElementById ("endtimehour");
            var endMSelect = document.getElementById ("endtimemin");

                // convert string values to integers
            var startH = parseInt (startHSelect.value);
            var startM = parseInt (startMSelect.value);
            var endH = parseInt (endHSelect.value);
            var endM = parseInt (endMSelect.value);

                // create Date objects from start and end
            var start = new Date ();    // the current date and time, in local time.
            var end = new Date ();  // the current date and time, in local time.

                // set the selected hours and mins
            start.setHours (startH, startM);
            end.setHours (endH, endM);

                // calculate the elapsed time in milliseconds
            var elapsedInMS = end.getTime () - start.getTime ();

                // display the result
            var elapsedSpan = document.getElementById ("elapsed");
            elapsedSpan.innerHTML = "" + (elapsedInMS / 1000 / 60);
        }
 
        function Init () {
            var startHSelect = document.getElementById ("starttimehour");
            var startMSelect = document.getElementById ("starttimemin");
            var endHSelect = document.getElementById ("endtimehour");
            var endMSelect = document.getElementById ("endtimemin");

                // fill the selection lists 
            for (var i = 0; i < 24; i++) {
                var option = new Option ((i < 10 ? "0": "") + i, "" + i);
                startHSelect.options.add (option);
                var option = new Option ((i < 10 ? "0": "") + i, "" + i);
                endHSelect.options.add (option);
            }

            for (var i = 0; i < 60; i++) {
                var option = new Option ((i < 10 ? "0": "") + i, "" + i);
                startMSelect.options.add (option);
                var option = new Option ((i < 10 ? "0": "") + i, "" + i);
                endMSelect.options.add (option);
            }

            CalculateElapsedTime ();
        }
    </script>
</head>
<body onload="Init ()">
    h:
    <select id="starttimehour" onchange="CalculateElapsedTime ()"></select>
    m:
    <select id="starttimemin" onchange="CalculateElapsedTime ()"></select>
    -
    h:
    <select id="endtimehour" onchange="CalculateElapsedTime ()"></select>
    m:
    <select id="endtimemin" onchange="CalculateElapsedTime ()"></select>
    <br /><br />
    Elapsed time in mins: <span id="elapsed"></span>
</body>