Tuesday , 18 June 2019
Home / Programming / JavaScript / Form Events – Advanced JavaScript Tutorial
Form Events
Form Events

Form Events – Advanced JavaScript Tutorial

If you’ve seen my JavaScript tutorial series, then you already know how to work with forms. In this tutorial, we’ll talk a little more about form events  and how to manipulate them with JavaScript.

Setting Up The Document

Let’s update the body tags to this.

We just have a basic form with some input fields. You should remember that each field should have a name if you want to directly access them.  Let’s clear out our script and add this bit of code.

When working with forms, you get access to 2 methods. The submit() method submits the form for you. The reset() form will reset the form. All fields will be set to the original value they were originally set to when the page loaded. In our case, all fields should go blank.

The last 2 methods are specifically for input fields. When you force a user to focus on an input field, then the browser will select an input field so the user can just start typing away. This is useful when you have a login form and you want them to just get in right away. The blur() method does the exact opposite. It focuses away from a certain element. These methods must be applied to an input field and not the form.

Form Events

Let’s update our script to this.

We apply an event listener to the myName field. The focus event can be fired if the focus() method is used or if the user manually selects that field. Inside our event, we simply update the div tag with the ID message. Try refreshing your page and then select the myName field. You should see the message outputted. Let’s add this bit of code to our script.

I introduce 3 events here. The first event is the change event. This event fires when a user focuses on a field and updates that field.  The user must blur out of that field after their change. Refresh your page and try typing some random gibberish into the myColor field. It’s not until you blur out of the field will the change event fire.

The blur event fires when the user blurs out of a field regardless if the field has been updated or not. The last event here is the submit event. This event fires if the form has been submitted by the user. In this event, we disable the submit button by setting the disabled property to true. This is so that the user doesn’t submit the form multiple times. This is a common technique in most websites.


We’ll keep learning more about forms in the next tutorial. For more information on form events, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.