javascript - 如何在不离开页面的情况下使用 AJAX 提交表单 HTML Formsubmit

Question

我正在使用 Formsubmit将联系我们表格发送到我的电子邮件，到目前为止它正在工作。
但是我希望当用户发送表单时它不会将其重定向到源 thank you page相反，我只想在同一页面上显示感谢文字。我想用我自己的。
所以我关注了documentation我想出了以下内容:
不幸的是，当我尝试验证表单按钮时，它不起作用

<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>

注意:取消注释这一行 <input type="hidden" name="_next" value="thanks.html">将验证表单并浏览另一个页面，这不是我在这里想要的。
有任何想法吗 ？

Answer 1

为了防止提交，您应该返回 false

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

或者在表单标签中 <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">-->