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