如何在成功提交表单时创建弹出模式？

Question

I have an HTML form connected to formsubmit.co form endpoint.

 <form action="https://formsubmit.co/my@email.com" method="POST" class="form">
     <input type="text" name="name" required>
     <input type="email" name="email" required>
     <button type="submit">Submit</button>
</form>

I've added <input type="hidden" name="_next" value="https://mydomain.co/thanks.html"> to redirect back to the original page after submission is required. I've also disabled the reCAPTCHA using <input type="hidden" name="_captcha" value="false"> , so when the form is submitted, the page just reloads.

The problem is the user doesn't know anything has happened after form submission, the page just loads for some time and then reloads. I don't want to create another page for this, I actually want to use a modal for it.

I tried adding a submit event listener, and when that event is triggered, an alert is shown; but the alert shows even before the form submission process begins.

function alertSubmit() {
  alert('Your details were successfully received.');
}

const form = document.querySelector('form');
form.addEventListener('submit', alertSubmit);

How can I display an alert immediately after the form is successfully submitted and not when the submit button is clicked?

Answer 1

You can do following changes:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form action="https://formsubmit.co/your@email.com" method="POST" class="form"> <input type="text" name="name" required> <input type="email" name="email" required> <button type="submit">Submit</button> </form> <script> $(document).ready(function(){ $('.form').on('submit', function(){ alert('Your details were successfully received.'); }); }); </script>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form action="https://formsubmit.co/your@email.com" method="POST" class="form">
     <input type="text" name="name" required>
     <input type="email" name="email" required>
     <button type="submit">Submit</button>
</form>
<script>
    $(document).ready(function(){
        $('.form').on('submit', function(){
            swal("Title", "Message Content", "success", {
  button: "Ok",
});
        });
    });
</script>