onchange event
[This documentation is preliminary and is subject to change.]
Fires when the contents of the object or selection have changed.
 |
Syntax
| HTML Attribute | <element onchange = "handler(event)"> |
|---|---|
| Event Property | object.onchange = handler; |
| attachEvent Method | object.attachEvent("onchange", handler) |
| addEventListener Method | object.addEventListener("change", handler, useCapture) |
Standards information
- HTML 4.01 Specification, Section 18.2.3
Event information
| Synchronous | No |
|---|---|
| Bubbles | No |
| Cancelable | No |
Event handler parameters
- pEvtObj [in]
-
Type: IHTMLEventObj
Remarks
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.
The onchange event does not fire when the selected option of the select object is changed programmatically.
Changed text selection is committed.
To invoke this event, do one of the following:
- 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.
The pEvtObj parameter is required for the following interfaces:
- HTMLAnchorEvents2
- HTMLAreaEvents2
- HTMLButtonElementEvents2
- HTMLControlElementEvents2
- HTMLDocumentEvents2
- HTMLElementEvents2
- HTMLFormElementEvents2
- HTMLImgEvents2
- HTMLFrameSiteEvents2
- HTMLInputFileElementEvents2
- HTMLInputImageEvents2
- HTMLInputTextElementEvents2
- HTMLLabelEvents2
- HTMLLinkElementEvents2
- HTMLMapEvents2
- HTMLMarqueeElementEvents2
- HTMLObjectElementEvents2
- HTMLOptionButtonElementEvents2
- HTMLScriptEvents2
- HTMLSelectElementEvents2
- HTMLStyleElementEvents2
- HTMLTableEvents2
- HTMLTextContainerEvents2
- HTMLWindowEvents2
Examples
This example uses the onchange event to retrieve the selected option of a select object.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onchangeEX.htm
<body>
<form>
<p>Select a different option in the drop-down list box to trigger the onchange event.
<select name="selTest" onchange="alert('Index: ' + this.selectedIndex
+ '\nValue: ' + this.options[this.selectedIndex].value)">
<option value="Books">Books</option>
<option value="Clothing">Clothing</option>
<option value="Housewares">Housewares</option>
</select> </p>
</form>
</body>
See also
- a
- abbr
- acronym
- address
- applet
- area
- audio
- b
- base
- baseFont
- bdo
- bgSound
- big
- body
- blockQuote
- br
- button
- canvas
- caption
- center
- cite
- code
- col
- colGroup
- comment
- custom
- dd
- del
- dfn
- dir
- div
- dl
- document
- dt
- em
- embed
- fieldSet
- font
- form
- frame
- frameSet
- head
- hn
- hr
- html
- i
- iframe
- img
- input type=button
- input type=checkbox
- input type=file
- input type=hidden
- input type=image
- input type=password
- input type=radio
- input type=reset
- input type=submit
- input type=text
- ins
- isIndex
- kbd
- label
- legend
- li
- link
- listing
- map
- marquee
- media
- menu
- meta
- nextID
- noBR
- noFrames
- noScript
- object
- ol
- optGroup
- option
- p
- param
- plainText
- pre
- q
- rt
- ruby
- s
- samp
- script
- select
- small
- source
- span
- strike
- strong
- style
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- title
- tr
- tt
- u
- ul
- var
- wbr
- video
- window
- xmp
- onkeypress
Build date: 3/14/2012
Community Content
kenchiu
onchange select-box
It doesnt fires when you select a select-box en use the arrow keys to navigate through the options, it fires when you leave the selectbox.
kenchiu
onChange does not bubble, so how to trigger it for a form?
Note that the onChange event (unlike, say, the onClick event) does NOT bubble. So even though the onChange event "applies" to forms, a change to an input element does not bubble and therefore does not trigger an onChange event of the form. This is different behavior than FireFox or Chrome, but at least Microsoft documents it. Alas, it is not clear to me what user conduct could trigger a form's onChange event. Perhaps someone else knows?
BrunoLM
Remarks
This event can only be attached to "input" type elements. You can't attach on a div, table, p, a, strong, i and so on. You can only attach to input, select, radio, checkbox...
mvdeveloper
How to use onchange on table?
When I use onchange on table using Attributes.Add("onchange","alert('hello');") it does not work when any rows within that table has changed, however this works in FireFox. I saw this article for table's onchange event and it does not help me.
Thomas Lee
I8's onchange handler is broken. Firefox doesn't have this problem.
Ie8's onchange handler is broken. Firefox doesn't have this problem.
Mr. Raymond Kenneth Petry
Restrictions
N.B. Does not fire for all object elements in a popup, e.g. <INPUT onchange=...> works, but <B CONTENTEDITABLE onchange=...> does not.
N.B. #2. Does not appear to fire for either, on programmatic change, in a popup.
N.B. #2. Does not appear to fire for either, on programmatic change, in a popup.
urMum
onEvent malfunctions in IE7 if they are added to an element via the setAttribute() function.
onEvent handlers will not work in Internet Explorer 7 (and below?) if they are added to an element via the setAttribute() function. Instead the element.innerHTML must be used.
John Sudds [Microsoft]
Fires late on a readio/checkbox button
If you use onchange on a radio or checkbox button, the onchange event will not fire until you "blur" the element.
[jsudds] That is correct. If you wish to automate some part of your UI based on instant feedback from a checkbox, you'll want to use the onclick event instead.
[jsudds] That is correct. If you wish to automate some part of your UI based on instant feedback from a checkbox, you'll want to use the onclick event instead.