javascript - 提交后清除表单字段

Question

我已经阅读了同一问题的其他答案，但我遇到了问题，非常感谢您提供一些建议。我的 html 文件中有 javaScript，提交按钮上有一个 Onclick() 语句来清除表单，但现在电子邮件确认消息不会出现，并且不再发送消息。如果我把 onClick();在表单正文中，只需单击表单字段即可清除每个字段。我真的希望能够提交消息，然后在成功发送后清除表单。

   <script type ="text/javascript"> 
            function clearform () {
 document.getElementById("name").value="";
 document.getElementById("email").value="";
 document.getElementById("subject").value="";
 document.getElementById("message").value="";
}
</script>

            <div class="row">
                <div class="col-sm-6">
                    <h2>Send us a message</h2>
                    <!-- action="replace it with active link."-->
                    <form action="contact.php" method="post" name="contact-form" id="contact-form" >
                        <label for="name">Your Name <span>*</span></label>
                        <input type="text" name="name" id="name" value="" required />
                        <label for="email">Your E-Mail <span>*</span></label>
                        <input type="text" name="email" id="email" value="" required />
                        <label for="subject">Subject</label>
                        <input type="text" name="subject" id="subject" value="" />
                        <label for="message">Your Message</label>
                        <textarea name="message" id="message"></textarea>
                        <div class="row">
                            <div class="col-sm-6">
                                <input type="submit" name="sendmessage" id="sendmessage" value="Submit" onclick="clearform();" />
                            </div>
                            <div class="col-sm-6 dynamic"></div>
                        </div>
                        </form>

然后我在 PHP 文件中包含以下内容:

    private function sendEmail(){
    $mail = mail($this->email_admin, $this->subject, $this->message,
         "From: ".$this->name." <".$this->email.">\r\n"
        ."Reply-To: ".$this->email."\r\n"
    ."X-Mailer: PHP/" . phpversion());

    if($mail)
    {
        $this->response_status = 1;
        //$this->response_html = '<p>Thank You!</p>';
    }
}


function sendRequest(){
    $this->validateFields();
    if($this->response_status)
    {
        $this->sendEmail();
    }

    $response = array();
    $response['status'] = $this->response_status;   
    $response['html'] = $this->response_html;

    echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span>";
    header("Location: contact.php");// redirect back to your contact form
    exit;


   }

}


$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();

?>

Answer 1

没有ajax表单发布

如果您没有使用ajax提交表单(您似乎没有使用它)，则不需要javascript来清除表单，表单将在提交时重新加载并且为空。

但是，您的 location 重定向存在问题:您在此之前输出 html，因此重定向可能会失败。

在重定向之前不应输出任何内容，并且可以向 URL 添加查询变量，以便在表单加载时显示成功消息:

if($this->response_status)
{
    $this->sendEmail();
}

header("Location: contact.php");// redirect back to your contact form
exit;

使用ajax发布表单

如果您正在使用ajax(响应变量的设置似乎表明您想要这样做)，您应该将 clearform () 调用放在 ajax 调用的 success 函数中，并且删除 php.ini 中的 header() 重定向。相反，您可能想返回/输出结果:

if($this->response_status)
{
    $this->sendEmail();
}

$response = array();
$response['status'] = $this->response_status;   
$response['html'] = $this->response_html;

echo json_encode($response);
exit;