如何在同一页面上刷新联系表单 HTML PHP JavaScript [关闭]

Question

真的很纠结这个，没想到简单的表格会这么复杂。在后端方面，我是新手。

我有 3 个字段；姓名、电子邮件和消息。提交时，我只想在表单框中输入一个简单的“谢谢”消息。我不想发送到另一个页面或刷新到当前页面的顶部。我希望用“谢谢”消息刷新表单，理想情况下，该消息会在几秒钟后消失。

在尝试了几种不同的方法后，我几乎可以使用 JS，使用事件侦听器在单击提交后显示“谢谢”消息。

但是，现在联系表单在提交时不会刷新，并且输入的数据仍会与感谢信息一起显示在表单上。如何让表单在提交时刷新？

我一直使用 WordPress，联系表格看起来很简单。到目前为止，我已经为此花费了数小时。

HTML

<div class="form-box">
<p id="thank-you-message">
    Thank you for your message. We will be in touch with you very soon.
</p>
<form method="POST" action="contact-form.php" >
    <div class="form-control">
        <input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
        <input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
    </div>
    <div>
        <textarea id="message" name="message" placeholder="Project Details" required></textarea>
        <button class="send" name="submit" type="submit">SEND</button>
    </div>
</form> 

PHP

<?php

    if(isset($_POST['email']) && $_POST['email'] !='') {
    $name = $_POST['name'];
    $visitor_email = $_POST ['email'];
    $message = $_POST ['message'];

    $email_from = 'website.com';

    $email_subject = "New Form Submission";
    
    $email_body = "User Name: $name.\n".
                    "User Email: $visitor_email.\n".
                        "User Message: $message.\n";

    $to = "contact@email.com";

    $headers = "From: $email_from \r\n";

    $headers .= "Reply-To: $visitor_email \r\n";

    mail($to,$email_subject,$email_body,$headers);

    header("Location: index.html");

    }

    ?>

JS

const form = document.querySelector('form');
const thankYouMessage = document.querySelector('#thank-you-message');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  thankYouMessage.classList.add('show');
  setTimeout(() => form.submit(), 2000);
});

---

@詹姆斯·巴克

HTML

<form method="POST" action="contact-form.php" >
<?php echo $successMessage ?>
<div class="form-control">
                            <input type="hidden" name="valid" value="false">
                            <input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
                            <input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
                        </div>
                        <div>
                            <textarea id="message" name="message" placeholder="Project Details" required></textarea>
                            <button class="send" name="button" type="submit">SEND</button>
                        </div>
                    </form>

JS

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  form.valid.value = 'true';
    consultForm.submit();
});

PHP

<?php
    
    $successMessage == '';
    if($_POST['valid'] == 'true'){
    $name = $_POST['name'];
    $visitor_email = $_POST ['email'];
    $message = $_POST ['message'];

    $email_from = 'website.com';

    $email_subject = "New Form Submission";
    
    $email_body = "User Name: $name.\n".
                    "User Email: $visitor_email.\n".
                        "User Message: $message.\n";

    $to = "contact@email.com";

    $headers = "From: $email_from \r\n";

    $headers .= "Reply-To: $visitor_email \r\n";

    $header("Location: index.html");
    
    $success = mail($to,$email_subject,$email_body,$headers); 
   
   if ($success){
        $successMessage = 'Your Message was sent!';
    } else {
   $successMessage = 'There was a problem, message was not sent';
        
    }
    }

    ?>

Answer 1

如果您要使用fetch 或常规XMLHttpRequest，您可以在数据发送到后端 PHP 脚本后使用回调来操作 DOM。

处理请求的 PHP 脚本将不再需要 header('Location: index.html'); - 相反，您可以回显/返回一条消息以供 ajax 回调使用。

以下内容未经测试

document.addEventListener('DOMContentLoaded',()=>{
    let form=document.querySelector('form');
    
    form.querySelector('button[type="submit"]').addEventListener('click',e=>{
    
        e.preventDefault();
        
        fetch( 'contact-form.php' , { method:'post', body:( new FormData( e.target.parentNode.parentNode ) ) } )
            .then( r=>r.text() )
            .then( data=>{
            
                //show the message
                document.querySelector('#thank-you-message').classList.add('show');
                

                //iterate through form elements and set the value to empty string if it is not a button
                for( i=0; i<form.elements.length; i++ ){
                    let el=form.elements[i]
                    if( el.type!='button' )el.value='';
                }
                
                // remove the button
                e.target.parentNode.removeChild(e.target);
            })
    })
});

<div class="form-box">
    <p id="thank-you-message">
        Thank you for your message. We will be in touch with you very soon.
      </p>
    <form method="POST" action="contact-form.php" >
        <div class="form-control">
            <input class="text-box" id="name" name="name" type="text" placeholder="Your Name*" required>
            <input class="text-box" id="email" name="email" type="email" placeholder="Your Email Adress*" required>
        </div>
        <div>
            <textarea id="message" name="message" placeholder="Project Details" required></textarea>
            <button class="send" name="submit" type="submit">SEND</button>
        </div>
    </form>
</div>

Answer 2

简短的回答是：您需要将提交按钮的name 属性更改为提交以外的其他内容，然后您就可以使用您的JS 调用form.submit()。

目前您的页面是这样工作的：

1. 用户输入信息并点击提交
2. 您的 JS 捕获事件并 阻止默认操作
3. 您显示感谢信息，然后 submit() 表单。

这种方法的问题是：

1. 在发送实际消息之前会显示感谢消息。
2. 没有表单验证
3. 消息仅显示 2 秒，并且仅在实际电子邮件发送之前显示。

更好的方法是：

1. 用户填写表单并点击提交
2. JS 捕获事件，阻止默认，验证所有数据，如果一切都有效，如果提交表单，将表单值 POST 到当前页面，这将重新加载页面并清除表单字段。
3. 您的 PHP 脚本将获取已发布的变量、发送电子邮件并在页面上显示您的感谢信息。

优点是：

1. 在电子邮件实际发送之前，您不会显示消息
2. 您正在确保表单具有有效的条目
3. 您的消息在刷新后显示，2 秒后不会消失

方法如下（代码未经测试）：

在表单中使用名称“有效”进行隐藏输入：

<input type="hidden" name="valid" value="false">

一旦您的 JS 验证了输入，您将其设置为 true 并 submit() 表单。这会将变量与其他表单值一起发布到您的 PHP。

form.valid.value = 'true';
consultForm.submit();

在你的 php 中你写一个 if 语句：

$successMessage == '';
create empty variable success message than we will assign a message if a form submission is detected.
if($_POST['valid] == 'true'){ //keep in mind we are passing a string 
   not an actual boolean
   //insert your php email script here
   $success = mail($to,$email_subject,$email_body,$headers); 
   //assigning return value of mail() to variable named success
   
   if($success){
        $successMessage = 'Your Message was sent!'
   } else {
   $successMessage = 'There was a problem, message was not sent'
}

然后您可以在 HTML 中的任何位置回显 $successMessage。

<?php echo $successMessage ?>

页面初始加载时，在表单提交之前，$successMessage 将为空字符串，因此 echo $successMessage 不会对页面产生任何影响。