Javascript 通过PHP将表单发送到邮件，无需刷新页面和清除字段

我的网站上有一个表单，它通过PHP代码将信息发送到我的电子邮件。虽然当我提交表单时，它会刷新/重新加载页面，但这一切都很有魅力

有没有一种方法可以让用户单击submit按钮时，页面不会刷新，字段也会被清除

我在这里找到了很多有同样问题的人发的帖子，尽管这些帖子对我来说并不都有效

我已经尝试过的：使用iFrame。然后页面不会刷新，字段也不会被清除

我最好做什么

HTML:

维斯图尔·贝里赫特

PHP:

if（isset（$\u POST[“submit”]）{if（isset（$\u POST[“submit”]））{
$nam=$_POST[“name”]；
$ema=$_POST[“email”]；
$sub=$_POST[“主题”]；
$mes=$_POST[“message”]；
$your_email=”testertje777@gmail.com";
$subject=$sub；
$email_body=$mes；
如果（isset（$_请求['message']））{
邮件（$your_email，$subject，$email_body，“From:$nam”）；
标题（“位置：bomatec.be”）；
退出（）；
}
}

有没有一种方法可以让用户单击submit按钮时，页面不会刷新，字段也会被清除

有多种方法可以实现这一点：

iframe 正如您所提到的，可以将用作表单的目标。请确保iframe定义了name属性，然后将该值用作表单的目标值

<iframe name="ifr"></iframe>
<form class="contact-form" method="post" action="form.php" target="ifr">

---

请参阅中的演示。请注意，form.php已被替换为

，因为该小提琴环境中只能有一个页面。此外，该函数在那里被禁用，因此包含该函数的行已被注释掉（并且

l

替换为

1

，因为该代码不会以其他方式运行）.

您可以通过AJAX功能，例如通过JQuery：

$(".contact-form").submit(function() {
    return $.ajax({
        type: "POST",
        url: "form.php",
        data: $(this).serialize()
    }).done(function() {
            alert("Thanks for your message!"),
            $("form.contact-form").each(function() {
            this.reset();
        });
        })
});

您还可以从HTML代码中删除

action=“form.php”

。

---

请。

学习JavaScript和Ajax是一条必由之路，与：）@TobiasF携手共进。理想情况下，您应该链接到比W3s更好的资源：）

<iframe name="ifr"></iframe>
<form class="contact-form" method="post" action="form.php" target="ifr">

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    document.forms[0].addEventListener('submit', function(event) {
        event.target.reset();
    });
});
</script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    document.forms[0].addEventListener('submit', function(event) {
        event.preventDefault();
        var formData = new FormData(document.forms[0]);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'form.php', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) { //request is done
                //request is finished - update DOM accordingly
            }
        }
        xhr.send(formData);
        document.forms[0].reset();
    });
});
</script>

$(".contact-form").submit(function() {
    return $.ajax({
        type: "POST",
        url: "form.php",
        data: $(this).serialize()
    }).done(function() {
            alert("Thanks for your message!"),
            $("form.contact-form").each(function() {
            this.reset();
        });
        })
});