如何在同一页面上刷新联系人表单HTML PHP JavaScript

真的很难处理这个问题，没想到一个简单的表单会这么复杂。当谈到后端时，我是个新手。

我有三个领域；姓名、电子邮件和信息。提交时，我只想要一个简单的"；谢谢你"表单框中的消息。我不想发送到另一个页面或刷新到当前页面的顶部。我希望表单刷新为"谢谢"消息，最好是几秒钟后消息消失。

在尝试了几种不同的方法之后，我几乎可以使用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 rn";
$headers .= "Reply-To: $visitor_email rn";
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);
});

@James Bakker

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 rn";
$headers .= "Reply-To: $visitor_email rn";
$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';

}
}
?>

如果要使用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>

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

当前您的页面工作方式如下：

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

这种方法的问题是：

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

更好的方法是：

用户填写表单并单击提交
JS捕获事件，防止默认，验证所有数据，如果提交表单时所有数据都有效，则将表单值张贴到当前页面，这将重新加载页面并清除表单字段
您的PHP脚本将接收POSTed变量，发送电子邮件，并在页面上显示您的感谢信息

优点是：

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

以下是如何，(代码未测试(：

在表单中使用名称"valid"进行隐藏输入：

<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对页面没有影响。

相关内容

最新更新

热门标签：