The JavaScript .preventDefault() Event Method

Copy Link LinkedIn Message Facebook Email X

If you don't modify the default behavior of forms, when you hit the 'Submit' button, the whole page refreshes and all the data gets sent somewhere else.

In this lesson, you will discover how to harness the power of JavaScript to stop a form's default submission behavior in its tracks. You'll learn how to use the event object's .preventDefault() method to control the user experience exactly the way you want it.

Not only that, you'll get comfy with event listeners and gain insights into why developers often diverge from the HTML form's default behavior.

How to Prevent an Event's Default Behavior

Say you have a form:

<form id="demo-form">
	<label for="name">Name:</label>
	<input id="name" name="name" />
	<input type="submit" />
</form>

Once you have a reference to the form element, you register a submit event listener on the form itself, passing it a reference to a function that handles the submit:

function handleSubmit(event) {
	console.log(event);
}

let form = document.getElementById('demo-form');
form.addEventListener(`submit`, handleSubmit);

If you type in something in the text input and press the submit button, what do you think will happen?

Get this set up locally and test it out!

Why Should You Prevent the Default Behavior

You may see something pop up on the console and then disappear almost immediately as the page refreshes, making you lose the text in the input along with it. This is part of the default behavior of HTML forms.

JavaScript developers usually opt out of this default behavior by calling .preventDefault() on the event object:

function handleSubmit(event) {
	event.preventDefault();
	console.log(event);
}

let form = document.getElementById('demo-form');
form.addEventListener('submit', handleSubmit);

When you press the submit button, the first thing that runs is the submit handler handleSubmit(event), once that is done, if .preventDefault() is not called, then the default behavior of the HTML form takes over and you are redirected to another page.

As a reminder, .addEventListener() assigns a callback function to an event. So whenever that event takes place, the callback function is called. It is called with an event object as an argument, that's why there is an event parameter when defining the function. You'll often see it abbreviated as e.

With .preventDefault() you can now press submit as many times as you'd like and the text will remain in the input and you'll stay on the same page!

Summary: Javascript Event Method: preventDefault()

In this lesson, you've:

• Seen firsthand how a form's default submission refreshes the page.
• Learned how to stop the form from submitting the traditional way by using the .preventDefault() method in your event handler.
• Gotten familiar with setting up event listeners, particularly listening for the submit event on a form.
• Explored why overriding default form behavior is a common practice—to avoid page refreshes and keep user-entered data intact.