How to Prevent Buttons from Submitting Forms in HTML and JavaScript

By the end of this page, you will understand why some buttons inside a form submit the form automatically, how the browser decides button behavior, and how to stop that submission safely using type="button", event handling, or form submit prevention in JavaScript.

In HTML, a <button> placed inside a <form> is treated as a submit button by default unless you explicitly say otherwise.

That means this button:

<button>Remove Last Item</button>

is effectively treated like this:

<button type="submit">Remove Last Item</button>

When clicked, the browser tries to submit the form.

This matters because many forms contain buttons that are not meant to submit anything. For example:

• add a row
• remove a row
• preview data
• open a dialog
• validate fields first

If you do not explicitly set the button type, the browser may submit the form when the button is clicked. Different browsers may appear to behave slightly differently depending on inline handlers, DOM changes, or timing, but the core rule is the same: inside a form, <button> defaults to submit.

The most reliable fix is to use:

<button type="button">Remove Last Item

Think of a form like a paper form on a clipboard.

• A submit button is the button that sends the form to the office.
• A normal button is just a tool on the desk, like “Add another page” or “Remove last line.”

If you place a button inside the form and do not label it, the browser assumes it is the send-to-the-office button.

So if you want a button that just performs an action on the page, you must label it as:

type="button"

Otherwise, the browser may try to send the form away.

The main syntax is simple.

1. Default behavior inside a form

<form>
  <button>Click me</button>
</form>

This button acts like a submit button.

2. Prevent form submission with type="button"

<form>
  <button type="button">Click me</button>
</form>

This button does not submit the form.

3. Submit button when you actually want submission

<form>
  <button type="submit">Submit</button>
</form>

Use this only for the real form submission action.

4. Better version of the original example

Consider this small example:

<form>
  <button id="remove">Remove</button>
</form>

What happens when you click it?

1. The browser sees a <button> inside a <form>.
2. Because no type is given, it treats the button as type="submit".
3. When the user clicks it, the browser starts the form submission process.
4. If no code prevents that default behavior, the page submits or reloads.

Now look at this version:

<form>
  <button id="remove" type="button">Remove</button>
</form>

What happens now?

1. The browser sees a button inside a form.
2. This time, the button is explicitly marked as type="button".

Buttons that should not submit forms are very common in real applications.

Dynamic form builders

Examples:

• add another email field
• remove a phone number field
• add a new address row

These buttons change the form structure, but should not send data yet.

Shopping carts

Examples:

• increase quantity
• decrease quantity
• remove item

These actions often update the page or send AJAX requests, not a full form submission.

Admin dashboards

Examples:

• preview settings
• test API connection
• generate slug from title

These are helper actions inside forms.

Multi-step forms

Examples:

• validate current step
• show more options
• go back to previous step

Only the final action should submit the full form.

Data entry tools

Examples:

• duplicate row
• clear section
• autofill values

These are interface actions, not submit actions.

In real projects, developers usually combine correct HTML semantics with JavaScript event handling.

Common pattern: explicit button types

<button type="button" id="addBtn">Add</button>
<button type="button" id="removeBtn">Remove</button>
<button type="submit">Save</button>

This makes intent obvious.

Common pattern: attach events in JavaScript

document.getElementById('addBtn').addEventListener('click', addItem);
document.getElementById('removeBtn').addEventListener('click', removeItem);

This is cleaner than inline onclick because:

1. Forgetting that <button> defaults to submit

Broken example:

<form>
  <button onclick="removeItem()">Remove</button>
</form>

Problem:

• The browser treats it as a submit button.
• removeItem() may run, but the form may submit afterward.

Fix:

<button type="button" onclick="removeItem()">Remove</button>

2. Relying only on return false in inline handlers

Example:

<button onclick="removeItem(); return false;">Remove</button>

This often works, but it mixes behavior into HTML and can be fragile in larger codebases. It is better to define correct button types first.

Quick rule

Inside a <form>, a <button> defaults to:

<button type="submit">

To stop submission

Use:

<button type="button">Remove</button>

Button types

<button type="submit">Submit form</button>
<button type="button">Run JavaScript only</button>
<button type="reset">Reset form fields</button>

Safe pattern

<form>
  Add Item
  Remove Item
  Submit

Why does a button submit a form even if I did not set type="submit"?

Because <button> inside a form defaults to type="submit" unless you explicitly set another type.

What is the easiest way to stop a button from submitting a form?

Set the button type to:

type="button"

Is return false enough to stop form submission?

It can work in inline handlers, but it is better to use type="button" for non-submit buttons and event.preventDefault() in JavaScript when needed.

Should I use <button> or <input type="button">?

Usually <button> is preferred because it is more flexible and easier to style, but both can be used for non-submit actions.

When should I use event.preventDefault()?

Use it when you are handling events in JavaScript and want to stop the browser's default behavior, such as form submission or link navigation.

Why did one browser seem to submit but another behaved differently?

Browser differences can appear due to event timing, DOM updates, and older implementations. Setting explicit button types removes this ambiguity.

• HTML forms — Forms define how user input is grouped and submitted.
• Button types in HTML — Understanding submit, button, and reset is directly related.
• JavaScript event handling — Click handlers and submit handlers control browser behavior.
• event.preventDefault() — This is a core tool for stopping default form submission.
• Form validation — Often used before allowing a submit action.
• DOM manipulation with jQuery — The original example dynamically adds and removes form rows.
• Inline event handlers — Relevant because the original code uses onclick.
• Progressive enhancement — Explicit button behavior makes forms more reliable across browsers.