JavaScript - Form Events

Form Events

The form events in JavaScript are events that are associated with HTML forms. These events are triggered by user actions when interacting with form elements like text fields, buttons, checkboxes, etc. Form events allow you to execute JavaScript code in response to these actions, enabling you to validate form data, perform actions on form submission or reset, and enhance the user experience.

JavaScript form events are hooked onto the elements in the Document Object Model also known as DOM where by default the bubbling propagation is used i.e. from bottom (children) to top(parent).

List of Common Form Events

Here are some common form events:

Form EventDescriptiononsubmitTriggered when a form is submitted. It’s often used for form validation before data is sent to the server.onresetTriggered when the form is reset, allowing you to perform actions when the user resets the form.onchangeTriggered when the value of a form element (input, select, textarea) changes. Commonly used for user input validation or dynamic updates.oninputTriggered immediately when the value of an input element changes, allowing for real-time handling of user input.onfocusTriggered when an element receives focus, such as when a user clicks or tabs into an input field. Useful for providing feedback or enhancing the user experience.onblurTriggered when an element loses focus, such as when a user clicks outside an input field or tabs away. Useful for validation or updates triggered by loss of focus.

Examples

Example: The onchange Event

The provided instance below illustrates the functionality of the onchange event. This event activates upon a user’s alteration in dropdown (<select>) option selection. The function, handleChange, dynamically modifies an <h2> element to display the newly selected country; thus offering immediate feedback as user preferences evolve.

Example: The onsubmit Event

The following example highlights the onsubmit event’s functionality upon form submission. The form features a username field and password field; both must be filled for successful validation when invoking the validateForm function. Upon passing this validation, submitting the form will trigger display of a confirmation message.

Example: The onreset event

In this demonstration, we observe the onreset event in action: it triggers upon the user’s click of the “Reset” button within a form. The resetForm function once invoked, clears the form content filled by user and then displays an alert to confirm successful reset of said form.

Example: The oninput Event

This example illustrates the oninput event: as the user types into the search input field a real-time action, indeed! The handleInput function triggers; it logs each current search input directly to screen.

Example: onfocus and onblur Events

The onfocus and onblur events merge in this example. The user’s focus on the input field triggers a call to the handleFocus function, which then logs a message into the console. In contrast, when clicks outside of or tabs away from said input field this action triggers execution of another function called handleBlur that subsequently records an alternative message within that same console log.