Monday , 20 November 2017
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.

Conclusion

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

https://developer.mozilla.org/en-US/docs/Web/API/Event

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link