Skip to main content

How to Prevent a Button from Submitting a Form in JavaScript

When a <button> element is placed inside a <form>, its default behavior is to act as a submit button. Clicking it will trigger the form's submission process, which typically results in a page reload. A common requirement in modern web development is to prevent this default behavior to allow for client-side validation, AJAX requests, or other custom logic.

This guide will explain the two primary and most effective ways to prevent a button from submitting a form: the simple HTML type="button" attribute, and the powerful JavaScript event.preventDefault() method.

The Core Problem: Why Buttons Submit Forms by Default​

According to the HTML specification, a <button> element placed anywhere inside a <form> element, without a type attribute specified, will default to type="submit".

Example of the problem:

<form>
  <input type="text" name="username">
  
  <!-- This button implicitly has type="submit" -->
  <button id="my-btn">Click Me</button>
</form>
note

Clicking this button will attempt to submit the form and reload the page. To stop this, we need to override this default behavior.

This is the simplest, cleanest, and most direct solution. If you have a button inside a form that should not submit the form, explicitly give it type="button".

Solution: By setting the type attribute to "button", you are telling the browser that this is a generic, clickable button with no default form-related behavior.

HTML:

<form>
  <input id="first-name" name="first-name">
  
  <!-- By setting type="button", we prevent form submission. -->
  <button type="button" id="my-btn">Do Something Else</button>
</form>

JavaScript: Now, your JavaScript can listen for clicks without needing to worry about the form submitting.

const myButton = document.getElementById('my-btn');
const firstNameInput = document.getElementById('first-name');

myButton.addEventListener('click', () => {
  // This code will run, but the form will not submit.
  console.log('Button was clicked!');
  console.log('Current value:', firstNameInput.value);
});
note

This is the recommended best practice for any button that is not the primary submission button of a form.

Solution 2 (For Conditional Submission): The event.preventDefault() Method​

Sometimes, you have a button that should submit the form, but only if certain conditions are met (e.g., the input is valid). In this case, you should listen for the form's submit event and use event.preventDefault() to stop the submission if your validation fails.

It is a best practice to listen on the form's submit event rather than the button's click event, because a form can also be submitted by pressing the "Enter" key in an input field.

Solution:

const myForm = document.getElementById('my-form');
const nameInput = document.getElementById('name-input');

myForm.addEventListener('submit', (event) => {
  // Check if the input is valid
  if (nameInput.value.trim() === '') {
    // 1. If not valid, prevent the form from submitting.
    event.preventDefault();
    
    alert('Name cannot be empty!');
  } else {
    // 2. If valid, allow the default submission to proceed.
    console.log('Form is valid and will be submitted.');
  }
});
note

This pattern gives you full control over the submission process, allowing you to stop it programmatically.

While not a direct way to prevent submission logic, disabling a button is the standard way to prevent the user from even attempting to submit a form, typically while waiting for a response or if the form is invalid.

The solution is to programmatically toggle the disabled property on the button.

const submitButton = document.getElementById('submit-btn');
const nameInput = document.getElementById('name-input');

nameInput.addEventListener('input', () => {
  // Disable the button if the input is empty.
  if (nameInput.value.trim() === '') {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

Practical Example: A Form with Client-Side Validation​

This example combines these techniques for a robust user experience. The submit button is disabled until the form is valid, and the submit event is used to perform the final action.

HTML:

<form id="signup-form">
  <input id="email-input" type="email" placeholder="Enter your email">
  <button id="submit-btn" type="submit" disabled>Sign Up</button>
</form>

JavaScript:

const form = document.getElementById('signup-form');
const emailInput = document.getElementById('email-input');
const submitButton = document.getElementById('submit-btn');

// Enable/disable button based on input
emailInput.addEventListener('input', () => {
  submitButton.disabled = !emailInput.value.includes('@');
});

// Handle the form submission
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent the page reload
  console.log('Form submitted with email:', emailInput.value);
  alert('Thank you for signing up!');
});

Conclusion​

Preventing a button from submitting a form is a fundamental task in web development with clear, modern solutions.

  • If a button is inside a form but should never trigger a submission (e.g., a "Cancel" or "Toggle" button), the best and simplest solution is to set its HTML attribute: type="button".
  • If you need to conditionally stop a form submission based on JavaScript logic (like validation), listen for the form's submit event and call event.preventDefault().
  • Use the disabled attribute to prevent the user from being able to click the button in the first place.

Table of Contents