Search within TutorialsPark

Javascript Form Events

Learn about events that can be fired on form events and their uses.

Javascript Form Events

The form property within the document object contains an array of all forms defined within the document.

Each element within the array is a form object , the index number associated with the form object defines the order in which the form appears on the webpage.

The exits a number of events associated with the form element. The table below enumerates them in detail.

Table : Event handlers for Form Elements.

Object Event Handler
button onClick, onBlur, onFocus
checkbox onClick, onBlur, onFocus.
FileUpLoad onClick, onBlur, onFocus
hidden none
password onBlur, onFocus, onSelect.
radio onClick, onBlur, onFocus
reset onReset.
select onFocus, onBlur, onChange.
submit onSubmit
text onClick, onBlur, onFocus , onChange
textarea onClick, onBlur, onFocus , onChange

Javascript Form Events : Buttons

The main utility of a button object is to trigger an event, say an onClick() event, but a button object has no default action.

The are several types of buttons associated with a form:

  • submit
  • reset
  • button

These events are fired when some click related activity is registered.

Table : The MouseEvent Object.

Event Handler Triggered When
onBlur The form's select, text, or textarea field loses focus.
onChange A select , text ot textarea field has lost the focus and values are changed.
onClick An object on a form gets clicked.
onFocus a field gets input focus.
onReset The the form is reset
onSelect text within the textarea field is selected
onSubmit A form is submitted

Javascript Form Events : Using keyword this

The current object is referred using the keyword this, it is used quite frequently with form element.

For forms with multiple input fields, it get easier to refer them using this keyword, than by using full name to call the event handler function.

Example: Javascript Form Events: Using a Keyword this.

Give it a TRY! » Note: The keyword this is a reference to the current object.

Javascript Form Events : Event handler onClick

Using the event handler onClick is the most frequently used in form, or elsewhere to trigger event handler function on click events.

A click event is set to take place when the button within a form, radio or checkbox is pressed or when a selection is made.

Example: Javascript DOM for Event Handling.

Give it a TRY! » Note:The click event triggers the onclick function for each input.

Javascript Form Events: onFocus and onBlur event handlers

The event handler onFocus is fired when a form element gets the focus.

Similarly, the onblur event handler is fired when the form element loses focus, i.e when the cursor moves away from form field

Example: Javascript Form Events: onFocus Event Handler

Give it a TRY! » Note: Focus on form fields to see the effects.

More form related applications will be explained in the chapter on forms.