How to disable the "submit" behavior of a button label inside a form label?

Question

<form action="">
  <button>click</button>
</form>

The default behavior of the

button within a form is to submit the form.

How do I disable the submit behavior of this button?

Answer 1

Sometimes you want to preserve the details of a submit button (for example, on mobile devices, the button can only be accessed via the keyboard if it is part of a form and of type submit Trigger submit button). In this case, you need to prevent the button's default behavior.

Using jQuery 1.7 (using .on - I highly recommend reading the documentation - there are many nuances to using .on that can greatly impact performance)

$(document).on("click", "button", "event", function(evt) {
    evt.preventDefault();
    ...
}

Using an older version of jQuery...

$("#button-id").bind("click", function(evt, ui) {
    evt.preventDefault();
    ...
}

Please note that you can use any selector (select by class, element type, etc.) or method of binding an event (instead of using .bind, use whatever works for you jQuery versions of .live, .delegate, etc.).

Answer 2

Add type="button" above it:

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

---

Available types are:

• "submit": Default value. submit Form.
• "reset": Reset the input of the form.
• "button": No operation.

A good reference: https://developer.mozilla.org/en/DOM/HTMLButtonElement