Include Button In Form Without Submitting [duplicate]

Question

How can I place a button inside a form which when clicked will not submit the form?

Demo HTML:

<form> <button>TEST</button> </form> <div></div>

Demo JavaScript (jQuery):

$(document).ready(function() { $('form').submit(function() { $('div').append('SUBMITTED<br>'); return false; }); });

When the button is clicked the form gets submitted. Is there a way to disable this behavior (rendering this demo form unsubmittable)?

My actual use case for this is creating a bootstrap styled button to activate a file input.

carloabelli · Accepted Answer · 2015-09-03 03:55:00Z

6

By default <button> type is submit, so just make it button:

<form> <button type="button">TEST</button> </form>

4,3493 gold badges46 silver badges71 bronze badges

answered Sep 3, 2015 at 3:48

6,7404 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Works perfectly. Funny that you have to specify button twice rather than submit once.

Lucas Piske · Accepted Answer · 2015-09-03 05:22:36Z

There is the tag <button> in HTML. You could use something like this:

<button type="button">This is the button label</button>

You can check the definition and usage here: http://www.w3schools.com/tags/tag_button.asp