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

问题

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

回答1:

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

回答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>

回答3:

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

回答4:

<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

回答5:

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

来源：https://stackoverflow.com/questions/18038085/how-to-use-onsubmit-to-show-a-confirmation-if-there-are-multiple-submit-button

标签

html

forms

onsubmit