Question

我已经设置了一个很好的联系表格，但我遇到了两个无法解决的问题。

首先，我想知道是否有一种清除用户在表单中输入的数据的好方法，例如在提交后我想要清除名称/邮件/消息字段。

但更大的问题是，每次提交或刷新时，相同的信息都会通过电子邮件发送，我已经阅读了这一点，到目前为止我只找到了解决此问题的重定向方式。在发送电子邮件后重定向到其他页面（thankyou.php等）。如果这是解决这个问题的唯一方法，那么第一个问题就不是问题，因为我必须明白这一点。如果是这样，我该如何实现呢？

我正在尝试使用if(!$mail->Send()) { header("Location: http://www.example.com"); exit; }

但我无法使其工作，页面停留在同一页面上，但表单消失了。邮件仍然发送。

在一个完美的世界中，我希望保持同一页面，清除字段并且无法通过刷新重新发送相同的数据 - 但似乎这是不可能的？

如果不是，这是我的代码 - 我应该在哪里使用header-redirect？

更新

我设法做到了！这是在Wordpress btw。

HTML / contact.php：

<form id="contact-form" onsubmit="submitForm(); return false;"> <!--This calls submitForm(); and stops the form of doing anything else when submitted, prevents reloading-->
        <div class="contact-input">
          <input type="text" id="name" placeholder="Your name" required>
        </div>
        <div class="contact-input">
          <input type="email" id="mail" placeholder="Your mail" required>
        </div>
        <div class="contact-input">
          <textarea id="message" placeholder="Your message" rows="10" required></textarea>
        </div>
        <input id="submitButton" type="submit" value="Send"><span id="status"></span>
      </form>

的JavaScript / contactform.js：

    function _(id) {
    return document.getElementById(id); //makes _ a shortcode for document.getElementById(id)
}

    function submitForm() {
            _("submitButton").disabled = true; //User cant click submit many times and resend form data, after first click its disabled.
            _("status").innerHTML = 'please wait...'; //Gives span value and the user an indication of that data is being processed.
            var formdata = new FormData(); // Creates variable that fetches they key value pair of id and value of  the form inputs.
            formdata.append( "name", _("name").value );
            formdata.append( "mail", _("mail").value );
            formdata.append( "message", _("message").value );
            var ajax = new XMLHttpRequest(); // creating an ajax variable which is a XMLHttpRequest, opens it/fires it by posting the formdata to parser.php
            ajax.open( "POST", "parser.php" );
            ajax.onreadystatechange = function() { //when ready do this function
                if(ajax.readyState == 4 && ajax.status == 200) { //when data is finished processing by php and data is returned by php to this ajax object(XMLHttpRequest)
                    if(ajax.responseText == "success") {
                    _("contact-form").innerHTML = '<h2>Thanks for contacting me '+_("name").value+' I will get back to you as soon as possible.</h2>'
                } else {
                _("status").innerHTML = ajax.responseText;
                _("submitButton").disabled = false; 
                clearForm();
                } 
            }
        }
        ajax.send( formdata );
    }

PHP / parser.php :( functions.php中的included_once）

    <?php
if ( isset($_POST['name']) && isset($_POST['mail']) && isset($_POST['message']) ) {
    $name = $_POST['name'];
    $mail = $_POST['mail'];
    $message = nl2br($_POST['message']);
    $to = "kontakt@emcolsson.se";
    $from = $mail;
    $subject = 'Contact form message';
    $message = '<b>Name:</b> '.$name.' <br><b>Email:</b> '.$mail.' <p>'.$message.'</p>';
    $headers = "From: $from\n";
    $headers .= "MIME-version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    if( mail($to, $subject, $message, $headers) ) {
        echo "success";
    } else {
        echo "The server failed to send the message. Please try again later.";
    }
}
?>

的JavaScript / clearform.js

function clearForm()
{
    document.getElementById("name").value=""; //don't forget to set the textbox ID
    document.getElementById("mail").value=""; //don't forget to set the textbox ID
    document.getElementById("message").value=""; //don't forget to set the textbox ID
}

现在，唯一的问题是，当发送/提交时，页面会自行复制，我的页面就像它之前的那样+另一个完整的页面（带有页眉，菜单，页脚）。为什么是这样？除了现在发送邮件，fomr被清除，刷新/新推送提交按钮不会发送另一份表格作为邮件 - 真棒！

Img：2x header and footer

谢谢！

Answer 1

<强>更新

学习AJAX基础知识的好工作！

在具体处理wordpress中的ajax方面，有一些wordpress hooks：

This article能够很好地概述您需要对其进行微调的一些修补程序。

使表单以wordpress方式工作的关键是使用内置的wordpress钩子，但他们也提出以下建议：

将您的ajax请求传递给admin-ajax.php。

使用jQuery处理表单提交。

应用nonce字段来保护表单处理器脚本（无论如何都应该这样做。）

不要忘记阅读the basics of PHP forms。

阻止表单重新提交的最简单方法是将表单验证代码包装在if(isset($_POST['submit'])条件下。

在清空字段方面，您可以执行accepted answer here建议的操作：在处理完表单后重置$_POST变量，或者只是不回显$_POST数据在您的输入值中。

有关使用AJAX的问题如下：

你可以在你的系统上设置一个单独的文件来处理这个表单的php处理 - 但是没有html或javascript吗？

您是否可以访问jQuery这样的库来平滑过渡到使用XHR？

如果是这样，您可以将此表单设为ajax表单，将其数据发布到您单独的php文件中。这将确保只有您选择触发表单提交的javascript事件才会运行php代码。此外，它将为您提供javascript可以处理的所有有趣的动画内容以及无页面重新加载的优点。

Answer 2

你有几个选择。您可以按特定ID清除字段。我使用按钮进行演示，但您可以使用回调功能。如果您愿意，可以在小提琴中运行此代码。

<input id="inputs" type="text" value="hello world">
<button onclick="emptyInputs()">Empty</button>

<script>
function emptyInputs(){
document.getElementById('inputs').value="";
}
<script>

您也可以通过为要清除的输入指定类来清除它们。您必须遍历所有输入。请注意我清除索引[0] ...您可以循环并清除所有输入。

document.getElementsByClassName('inputs')[0].setAttribute("value", "");

您也可以使用Jquery来执行此操作。

Answer 3

使用： function redirect（$ url，$ status = 302）{ 标题（＆＃39;位置：＆＃39; .str_replace（数组（＆＃39;＆amp;＆＃39;，＆＃34; \ n＆＃34;，＆＃34; \ r＆＃34;），数组（＆＃39;＆amp;＆＃39;，＆＃39;＆＃39;，＆＃39;＆＃39;），$ url），true，$ status）; 出口（）; }

提交和/或重定向后重置表单输入

3 个答案: