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

Question

我的网站上有一个表格，该表格通过PHP代码将信息发送到我的电子邮件中。 尽管当我提交表单时，它都会刷新/重新加载页面，但这一切都像一个咒语。

有没有一种方法可以使用户单击“提交”按钮时页面不会刷新，并且字段也将被清除？

我一直在这里找到很多有相同问题的人发布的帖子，尽管并不是所有帖子都对我有用。

我已经尝试过：使用iFrame。 该页面然后没有刷新，并且这些字段也不会被清除。

对我来说最好的事情是什么？

HTML：

                <form class="contact-form" action="form.php" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" name="name" placeholder="Naam" class="form-control" required>
                            <input type="email" name="email" placeholder="E-mail" class="form-control" required>
                            <input type="text" name="subject" placeholder="Onderwerp" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <textarea type="text" name="message" placeholder="Bericht..." id="message" rows="25" cols="10" class="form-control" required></textarea>
                            <button type="submit" name="submit" class="btn btn-default submit-btn form_submit">VERSTUUR BERICHT</button>
                        </div>
                    </div>
                </form>

PHP：

if (isset($_POST["submit"])) {if (isset($_POST["submit"])) {
$nam = $_POST["name"];
$ema = $_POST["email"];
$sub = $_POST["subject"];
$mes = $_POST["message"];

$your_email = "testertje777@gmail.com";
$subject = $sub;
$email_body = $mes;

if (isset($_REQUEST['message'])) {
    mail ($your_email, $subject, $email_body, "From: $nam <$ema>");
    header ("Location: bomatec.be");
    exit();
}
}

Answer 1

有没有一种方法可以使用户单击“提交”按钮时页面不会刷新，并且字段也将被清除？

有多种方法可以实现：

IFRAME

就像您提到的， <iframe>可以用作表单的目标。 确保iframe定义了名称属性，然后使用该值作为表单的目标值 。

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

为了提交表单时清除表单字段，请使用JavaScript处理程序，如下所示。 <script>标记将添加到<body>标记中（尽管它可以放在<head>标记中，但可能会减慢页面加载速度）。 DOM准备就绪后，它将为表单提交添加处理程序（使用document.addEventListener（））。 调用处理程序时，将通过对HTMLFormElement.reset（）的调用清除表单字段。

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

请注意，此代码假定页面上只有一种形式。 如果碰巧有多个，则添加一个id属性（例如<form id="maiForm"> ）并在访问JS中的表单时使用该id属性（例如，代替document.forms[0]使用document.getElementById('mailForm') ）。

在此phpfiddle中查看此技术的演示。

AJAX（带有XMLHttpRequest的Javascript）

这是另一种与iframe方法类似的技术，但是它使用了将类似下面的脚本标签添加到<body>标签的方法。 它使用document.addEventListener（）等待DOM准备就绪，然后为表单提交添加事件处理程序。 该事件处理程序将执行以下操作：

使用Event.preventDefault（）阻止默认表单提交
通过实例化FormData的实例来序列化表单数据
使用XMLHttpRequest.send（）（即AJAX）将异步请求发送到PHP页面，并将上一步中的表单数据作为POST数据。

使用HTMLFormElement.reset（）重置表单

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

看到它在phpfiddle中得到了展示。 注意， form.php已由<?php echo $_SERVER['PHP_SELF'];?>代替，因为在该小提琴环境中只能有一页。 此外，函数mail()在那里也被禁用，因此包含该函数的行已被注释掉（并且l替换为1因为否则代码将无法运行）。

Answer 2

您可以通过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" 。 请检查jsfiddle以获得完整示例。

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

问题描述

HTML：

PHP：

2 个解决方案

解决方案1
0 2017-04-16 14:08:24

IFRAME

AJAX（带有XMLHttpRequest的Javascript）

解决方案2
0 2017-04-17 05:55:52

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

问题描述

HTML：

PHP：

2 个解决方案

解决方案1 0 2017-04-16 14:08:24

IFRAME

AJAX（带有XMLHttpRequest的Javascript）

解决方案2 0 2017-04-17 05:55:52

解决方案1
0 2017-04-16 14:08:24

解决方案2
0 2017-04-17 05:55:52