JavaScript Form Events

JavaScript Form events are those events that get trigerred when a user interacts with a form in a website. The purpose of using form events is to make form filling process interactive and informative for the user. These form events includes onclick, onfocus, onblur, onreset, etc.

Optimal website interactivity creates a positive effect on user. Adding form events smartly, results in a rich user experience. So, how to create an interactive form? Interactive forms includes features like:

• Tips for form filling when user clicks/hovers on input field.
• Confirmation of form submission.
• Real time validation of email, contact number, etc.

There are many ways to use form events, let's see some mostly used ones:

Javascript Focus Event (onfocus)

Focus Event in JavaScript triggers when user focuses, i.e., clicks on an element. Using onfocus event handler, you can change element's style like change color, add shadow, etc. Similarly, you can show tooltips or alert boxes to give information about the input field.

Example of onfocus form event

In the example below, when user focuses, i.e., clicks on the input field, its color changes to green from white. So, what really happens is that when user clicks on input field, the onfocus event gets trigerred. The onfocus handler takes the control and calls the user-definedhighlightInput() function. This function has the code to change the input field's color to green. Function executes and changes input field's color.

Output

JavaScript Blur Event (onblur)

JavaScript Blur event is opposite of Focus event, it triggers when an element looses its focus. So, blur is a situation when an element gets unfocused after getting focused. The onblur event handler is used to handle this event.

Example of onblur form event

In the example of onblur event, an alert box gets displayed to inform the user that the input field has loses its focus. Notice that in this example the event handler is not calling any user-defined function. It is calling JS's in-built alert() function because we just want to give textual information to the user.

You are free to experiment with the code. Make your functions and try different styles.

Output

JavaScript Change Event (onchange)

JavaScript Change event gets trigerred when user modifies the written or chosen value of a form element. For example: Changing input field's value, changing selection of dropdown list or, changing radio button selection. The onchange event handler is used to handle this event.

Example of onchange form event

In the example of onchange event, a selection list is created. When the user changes the default value of the selection list, the onchange event handler gets trigerred and calls the alert box, as defined in the code. The alert box confirms the selection.

Output

JavaScript Submit Event (onsubmit)

JavaScript submit event occurs when user clicks on submit button to submit the form. Submit event is generally used to ask for confirmation from user to submit the form. The onsubmit event handler is used to handle this event.

Example of onsubmit form event

The example of onsubmit event also has an alert box popup. The onsubmit event handler gets trigerred when user clicks on the submit button. The alert box warn users that the information entered by them will be submitted to the online server. Try it out.

Output