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

Answer 1

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:

• Javascript onsubmit with form with multiple submits buttons
• HTML form with two submit buttons and two "target" attributes
• Form onSubmit determine which submit button was pressed
• How can I get the button that caused the submit from the form submit event?
  Two submit buttons in one form

Answer 2

<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

Answer 3

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>

Answer 4

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();
    }
});

Answer 5

<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.