Prevent a modal button to submit the form it is in

Question

The issue:

I have Bootstrap modal buttons in a form that open a modal to select data (users and cost types), these buttons are not meant to submit the main form.

When I press the modal buttons the modal opens only when other required fields are empty. When the required fields are filled in by a user the form submits (this is not hat I expect).

How can I prevent the form from submitting when trying to open a modal?

e.preventDefault(); does not prevent the form from submitting.

A jsfiddle can be found here: http://jsfiddle.net/cagy79/193thboq/

Any ideas?

Answer 1

Just add an input type of "button" to your HTML. Then you don't need your dontSubmit class.

<button data-toggle="modal" data-target="#modalAddStaff" type="button" >

The reason this is: In HTML5,any button without a type defaults to a "submit" type.

Hope that helps!