Can I make a <button> not submit a form?

javascript html jquery jquery-ui htmlbutton
alex picture alex · Jul 23, 2010 · Viewed 352.8k times · Source

I've got a form, with 2 buttons

<a href="index.html"><button>Cancel changes</button></a>

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

I use jQuery UI's button on them too, simply like this

$('button').button();

However, the first button also submits the form. I would have thought that if it didn't have the type="submit", it wouldn't.

Obviously I could do this

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

But is there a way I can stop that back button from submitting the form without JavaScript intervention?

To be honest, I used a button only so I could style it with jQuery UI. I tried calling button() on the link and it didn't work as expected (looked quite ugly!).

Answer

Josh Lee picture Josh Lee · Jul 23, 2010

The default value for the type attribute of button elements is "submit". Set it to type="button" to produce a button that doesn't submit the form.

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

In the words of the HTML Standard: "Does nothing."

Related questions

Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time …

Read More
How to make <input type="date"> supported on all browsers? Any alternatives?

I'm working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can't understand on how to integrate it on my website(on how to code it/what is the syntax/…

Read More
jQuery UI accordion that keeps multiple sections open?

I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.

Read More