JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

If you want to add a confirmation dialog box for form submission using JavaScript, you can use the onsubmit event of the form. You can create a function that displays a confirmation dialog, and based on the user's choice, either proceed with the form submission or cancel it. Here's an example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Submission Confirmation</title> <script> function confirmSubmit() { // Display a confirmation dialog var isConfirmed = confirm("Are you sure you want to submit the form?"); // If the user clicks OK, proceed with the form submission return isConfirmed; } </script> </head> <body> <form onsubmit="return confirmSubmit()"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <br> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <br> <button type="submit">Submit</button> </form> </body> </html>

In this example:

  • The confirmSubmit function is called when the form is submitted (onsubmit="return confirmSubmit()").
  • The confirm function shows a browser-native confirmation dialog with "OK" and "Cancel" buttons.
  • If the user clicks "OK," the function returns true, allowing the form submission to proceed.
  • If the user clicks "Cancel," the function returns false, canceling the form submission.

Note: While this approach provides a basic confirmation dialog, it relies on the browser's native confirmation dialog, which may vary in appearance across different browsers. If you need a more stylized and consistent dialog, you might want to consider using a JavaScript library or framework for dialog boxes.

Examples

  1. JavaScript form submit confirmation dialog

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { return confirm("Are you sure you want to submit the form?"); } </script>

    Description: Utilizes the confirm function to display a confirmation dialog before submitting the form.

  2. JavaScript form submit with cancel option

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { return confirm("Do you want to submit the form?"); } </script>

    Description: Displays a confirmation dialog with an option to cancel the form submission.

  3. JavaScript form submit confirmation with custom message

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { return confirm("Please confirm that you want to submit the form."); } </script>

    Description: Customizes the confirmation message for the form submission.

  4. JavaScript form submit confirmation with dynamic message

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { var formMessage = "Are you sure you want to submit the form with data: " + getFormData(); return confirm(formMessage); } function getFormData() { // Logic to retrieve form data return "Sample data"; } </script>

    Description: Dynamically generates the confirmation message based on the form data.

  5. JavaScript form submit cancel and continue options

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { var userResponse = confirm("Do you want to submit the form?"); if (userResponse) { // Continue with form submission return true; } else { // Cancel form submission return false; } } </script>

    Description: Provides options for the user to cancel or continue with the form submission.

  6. JavaScript form submit confirmation with sweet alert

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> <script> function confirmSubmit() { Swal.fire({ title: 'Are you sure?', text: 'Do you want to submit the form?', icon: 'question', showCancelButton: true, }).then((result) => { return result.isConfirmed; }); return false; // Prevents default form submission } </script>

    Description: Uses SweetAlert2 to display a visually appealing confirmation dialog.

  7. JavaScript form submit confirmation with Bootstrap modal

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <!-- Bootstrap Modal HTML --> <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="confirmationModalLabel">Confirm Submission</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Are you sure you want to submit the form? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </div> </div> <script> function confirmSubmit() { $('#confirmationModal').modal('show'); return false; // Prevents default form submission } </script>

    Description: Uses a Bootstrap modal for a styled confirmation dialog before form submission.

  8. JavaScript form submit confirmation with timeout

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script> function confirmSubmit() { setTimeout(function () { var userResponse = confirm("Do you want to submit the form?"); if (userResponse) { // Continue with form submission document.getElementById('myForm').submit(); } }, 500); return false; // Prevents default form submission } </script>

    Description: Delays the confirmation dialog using a timeout before proceeding with form submission.

  9. JavaScript form submit confirmation with multiple buttons

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit" name="action" value="submit">Submit</button> <button type="submit" name="action" value="cancel">Cancel</button> </form> <script> function confirmSubmit() { var userResponse = confirm("Do you want to submit the form?"); if (userResponse) { // Continue with form submission return true; } else { // Cancel form submission return false; } } </script>

    Description: Handles multiple buttons in the form and provides options for different actions.

  10. JavaScript form submit confirmation with external library (e.g., Bootbox)

    Code:

    <form id="myForm" onsubmit="return confirmSubmit()"> <!-- Form fields go here --> <button type="submit">Submit</button> </form> <script src="https://cdn.jsdelivr.net/npm/bootbox@5"></script> <script> function confirmSubmit() { bootbox.confirm({ title: "Confirmation", message: "Do you want to submit the form?", callback: function (result) { return result; } }); return false; // Prevents default form submission } </script>

    Description: Uses an external library (e.g., Bootbox) to display a confirmation dialog before form submission.

More Tags

bower virtualscroll crc16 remote-notifications systemctl rectangles parameterized nullpointerexception cllocationmanager switchcompat

More Programming Questions

More Trees & Forestry Calculators

More Livestock Calculators

More Entertainment Anecdotes Calculators

More Date and Time Calculators