如何使用 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">-->