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

为了防止提交你应该 return false in

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

如何使用 AJAX 提交表单而无需离开页面 HTML Formsubmit

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

javascript

html

ajax

form-submit