How do I create a pop up modal on successful form submission?-CodePudding

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

 <form action="https://formsubmit.co/[email protected]" method="POST" >
     <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?

CodePudding user response：

<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/[email protected]" method="POST" >
     <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>

CodePudding user response：

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/[email protected]" method="POST" >
    <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>