How to use onsubmit() to show a confirmation if there are multiple submit buttons on the same form?

Question

<form onsubmit="return confirm('Are you sure you want to rollback deletion of candidate table?')">
<input type='submit' name='delete' value='Undo' />
<input type='submit' name='no' value='No' />

when the user clicks on second submit button i.e No i want to display the confirmation dialogue as "Are you sure you want to commit the transaction."

possible duplicate of [Javascript onsubmit with form with multiple submits buttons](http://stackoverflow.com/questions/13707633/javascript-onsubmit-with-form-with-multiple-submits-buttons) — totymedli, Aug 03 '13 at 23:15

RatDon · Accepted Answer · 2013-08-06T21:44:23.933

30

<form method='post'>
    <input type='submit' name='undo' value='Undo' onclick="return confirm('Are you sure you want to rollback deletion of candidate table?')"/>
    <input type='submit' name='no' value='No' onclick="return confirm('Are you sure you want to commit delete and go back?')"/>
</form>

Worked fine. just changed onsubmit() to onclick(). as the function of both in this situation is same.

edited Aug 06 '13 at 21:44

answered Aug 03 '13 at 23:10

RatDon

3,403
8
43
85

3

This solution isn't as useful if there is validation on the form that would interrupt the post of the form an the onclick will fire even when the form doesn't post. You could still use it if you call your validation as part of the onclick though. – mikeschuld Aug 10 '18 at 16:47

score 2 · Answer 2 · edited Dec 17 '15 at 17:15

2

You could bind to onclick instead of onsubmit - see below.

<script> 
function submitForm() {
    return confirm('Rollback deletion of candidate table?');
}
<script>

<form>
    <input type='submit' onclick='submitForm()' name='delete' value='Undo' />
    <input type='submit' onclick='submitForm()' name='no' value='No' />
</form>

Or alternately, using jQuery:

<script> 
$(document).ready(function() {
    $('form input[type=submit]').click(function() {
        return confirm('Rollback deletion of candidate table?');
    });
});
<script>

edited Dec 17 '15 at 17:15

jpm

16,622
34
63
66

answered Aug 03 '13 at 23:11

Madison May

2,723
3
22
32

1

I think the question wanted buttons that should have different confirmation messages. – Brian Neal Sep 13 '14 at 20:11

score 0 · Answer 3 · answered Aug 03 '13 at 23:28

<form onsubmit="submitFunction();">
    <input type='submit' name='delete' value='Undo' />
    <input type='button' onclick="declineFunction()" name='no' value='No' />
</form>

I wouldnt try to create a submit but rather just a button that has a onclick="function()" and then use javascript to set a variable to see how many times they have clicked it and a alert();

hope this helps :D

score 0 · Answer 4 · answered Feb 26 '18 at 17:22

Here's an event-listener based solution that avoids inline event handlers (useful if your site has a Content Security Policy that forbids inline JavaScript):

HTML:

<form method="post">
    <input type="submit" id="deleteButton" name="delete" value="Undo" />
    <input type="submit" id="noButton" name="no" value="No" />
</form>

JS:

document.getElementById("deleteButton").addEventListener("click", function(evt) {
    if (!confirm("Are you sure you want to rollback deletion of candidate table?")) { 
        evt.preventDefault();
    }
});

document.getElementById("noButton").addEventListener("click", function(evt) {
    if (!confirm("Are you sure you want to commit the transaction?")) { 
        evt.preventDefault();
    }
});

score -1 · Answer 5 · edited May 23 '17 at 10:30

Just use two of the same form. One for each button:

<form onsubmit="return confirm('Are you sure you want to rollback deletion of candidate table?')">
    <input type='submit' name='delete' value='Undo' />
</from>
<form onsubmit="return confirm('Are you sure you want to rollback deletion of candidate table?')">
    <input type='submit' name='no' value='No' />
</from>

Also, if you would done your research you would find these:

this is common. is there anyway to do that with multiple submit buttons in a single form? — RatDon, Aug 03 '13 at 22:57

How to use onsubmit() to show a confirmation if there are multiple submit buttons on the same form?

5 Answers5

Linked