How to use onsubmit () to show confirmation if there are several submit buttons in one 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 the second submit button ie No I want to display the confirmation dialog as "Are you sure you want to complete the transaction".

Answer 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 great. just changed onsubmit() to onclick() . since the function of both in this situation is the same.

Answer 2

You can 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 3

Here is a listener-based solution that avoids inline event handlers (useful if your site has a content security policy that prohibits 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 4

Just use two identical forms. 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> 

In addition, if you do your research, you will find the following:

• Javascript onsubmit with a form with multiple submit buttons
• HTML form with two submit buttons and two "target" attributes
• The onSubmit form determines which submit button was clicked.
• How can I get the button that caused the submission from the submit form? Two send buttons in one view

Answer 5

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

I would not try to create submit, but just a button with the function onclick = "function ()", and then use javascript to set the variable to see how many times they clicked it, and alert ();

hope this helps: D