Why JS confirm() won't Cancel the submit action when I hit Cancel in confirm dialog?

Question

I tried to find out where is the problem, but no clue.
I have 4 buttons for one form by using HTML5 multi submit. When I click on DELETE button, a dialog pops out, by using an attribute onclick="confirm('message');. When I hit Cancel, it should stop form submission, close the dialog and stay on the same page without any actions, instead it keeps submitting the form. It works perfectly until now, and I can't find out where is the problem.

<form action="http://google.com/index/25" method="post" accept-charset="utf-8">
    <button class="btn" type="submit" name="formSubmit" value="new">New</button>
    <button class="btn" type="submit" name="formSubmit" value="save">Bulk save</button>
    <button class="btn btn-danger" type="submit" name="formSubmit" value="delete" onclick="confirm('Do you really want to remove a record(s)?.');">Delete permanently</button>
    <button class="btn" type="submit" onclick="confirm('stop or proceed');">submit</button>
</form>

And a live DEMO IS HERE on jsbin

Anyone got the same bug ?

Answer 1

Handle it on the form instead of the button, and have the handler return the outcome from the confirm dialog:

<form onsubmit="return confirm('stop or proceed');">

You can also handle the events of each button, but don't forget to return:

<button onclick="return confirm('blabla');">Button</button>