Question

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

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

我在SO上找到了同样问题的人发了很多帖子，虽然并非所有人都在为我工作。

我已经尝试过：使用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定义了 name 属性，然后将该值用作表单的 target 值。

<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')）。

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

见this 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"。请check jsfiddle for full example。

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

HTML：

PHP：

2 个答案:

IFRAME

AJAX（带有XMLHttpRequest的Javascript）