How to submit form using AJAX without having to leave the page HTML Formsubmit

Question

I'm using Formsubmit to send contact us form to my email and so far it's working.

But I would like when user send the form it does not redirect it to the source thank you page instead I'd like to display just thank you text on the same page. I'd like to use my own.

So I followed the documentation and I came up with the following : Unfortunately when I try validate the form button it does not work

<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text"   name="name">
<input type="phone"  name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email"  name="email" >
<input type="text"   name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center" 
type="submit" name="sendData">Send</button>

<!-- <input type="hidden" name="_next" value="thanks.html">-->

<script type="text/javascript">

var frm = $('#contactForm');
var msg_res ='';

frm.submit(function (e) {

    e.preventDefault();

   
    $.ajax({
        type: frm.attr('method'),
        method: "POST",
        url: "https://formsubmit.co/el/vupawa",
        dataType: 'html',
        accepts: 'application/json',
        data: frm.serialize(),
        success: function (response) {
        $("#message").html(response);
            if(response != msg_res){
                msg_res = response; //store new response
                alert('New message received');
              }
        },
        error: function (response) {
            console.log('An error occurred.');
            console.log(response);
        }
        complete: function(response){
         setTimeout(ajax,1000);
        }
    });
});
});
</script>

Note : that uncommenting this line <input type="hidden" name="_next" value="thanks.html"> will take validate the form and go through another page which is not what I want here.

Any ideas ?

Didn't work I believe the action attribute is required, also I did get alert success when I tried locally but when I tried on the host server didn't work I updated up — Ishaq Moutanabi Benaissa, May 03 '21 at 06:47

score 2 · Accepted Answer · answered May 03 '21 at 06:53

To Prevent Submission You should return false in

frm.submit(function (e) { 
   return false;
})

Or in form tag <form onSubmit="return false">

var frm = $('#contactForm');
var msg_res ='';

frm.submit(function (e) {

    e.preventDefault();

   
    $.ajax({
        type: frm.attr('method'),
        method: "POST",
        url: "https://formsubmit.co/el/vupawa",
        dataType: 'html',
        accepts: 'application/json',
        data: frm.serialize(),
        success: function (response) {
        $("#message").html(response);
            if(response != msg_res){
                msg_res = response; //store new response
                alert('New message received');
              }
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
    return false; // here a change
});

<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text"   name="name">
<input type="phone"  name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email"  name="email" >
<input type="text"   name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center" 
type="submit" name="sendData">Send</button>

<!-- <input type="hidden" name="_next" value="thanks.html">-->

You don't think `e.preventDefault();` does the job already in the submit handler? — Teemu, May 03 '21 at 06:55
it's work for button events and we want to prevent form submissin — Ravi Makwana, May 03 '21 at 06:56
It definitely works for any event having a default action, it's not limited to "button events" only. — Teemu, May 03 '21 at 06:57
He already tried that but its not working in his case so batter try all option we have — Ravi Makwana, May 03 '21 at 07:07
Yes, but doing the same thing in other way won't help, returning `false` just makes jQuery to do `event.preventDefault()` internally, it won't change anything. — Teemu, May 03 '21 at 07:11

How to submit form using AJAX without having to leave the page HTML Formsubmit

1 Answers1