Prevent Default Lab

Stop form submit and link navigation with event.preventDefault().

Demo settings

Uncheck to see the browser’s normal submit / navigate behavior.

Team signup form

Form has not been submitted yet.

Go to example.com

Actions will appear here.

Important HTML

Without JavaScript, submit navigates to the form action and the link leaves the page.

<form id="signup-form" action="https://example.com/signup" method="get">
  <input id="signup-name" type="text" name="name">
  <button type="submit">Submit signup</button>
</form>
<a id="leave-court" href="https://example.com">Go to example.com</a>

Important JavaScript

Call preventDefault() inside the handler to keep the page from leaving.

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

link.addEventListener("click", function (event) {
  event.preventDefault();
});