Abakada DHTML Events Reference: onchange Event

Fires when the contents of the object or selection have changed.

Inline HTML	<element onchange = "handler" ... >	All platforms
Event property	object.onchange = handler	ECMA-262 Language Specification
Named script	<script FOR=object EVENT=onchange>	Internet Explorer^® only

Bubbles	No
Cancels	Yes
To invoke	Choose a different OPTION in a SELECT object using mouse or keyboard navigation. Alter text in the text area and then navigate out of the object.
Default action	Changed text selection is committed.

A change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT type=text, SELECT, TEXTAREA element.

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.

On the SELECT object, this event does not fire programmatically when the selected attribute is changed from one OPTION to another.

While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.

Event Object Properties

clientX	Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars.
clientX	Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars.
offsetX	Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event.
offsetX	Retrieves the vertical coordinate of the mouse's position relative to the object firing the event.
returnValue	Sets or retrieves the return value from the event.
screenX	Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen.
screenY	Retrieves the vertical position of the mouse, in pixels, relative to the user's screen.
srcElement	Retrieves the object that fired the event.
type	Retrieves the event name from the event object.
x	Returns the horizontal position of the mouse when the event fires.
y	Returns the vertical position of the mouse when the event fires.

The example below shows how the onchange event works on the SELECT object.

Sample Code

<body>
<div align="center">
<form>
<select name=options onchange="alert(
  'You have selected '+value+'.')">
  <option value="none">— Select —
  <option value="Books">Books
  <option value="Clothing">Clothing
  <option value="Houseware">Houseware</select>
</form>
</div>
</body>

Show me

The following example shows use of the onchange event to trigger the function checkNum that checks for a range of values. If the value of the INPUT element is not within the valid range, the focus and select methods are used to set focus back to and highlight the INPUT. Otherwise, it calls the function thanks.

Sample Code

<input name="num"
  onchange="if (!checkNum(this.value, 1, 10)) 
    {this.focus();this.select();} else {thanks()}"
    value="0">

HTMLAREA, INPUT type=text, SELECT, TEXTAREA

onkeypress

Home Getting Started Web Forms Web Applications ADO.NET ASP/ADO Back to Basics

onchange Event

Syntax

Remarks

Event Object Properties

Example

Applies To

See Also