我正在建立一个网站，并有一个php联系表格。
表单和mail()功能的验证工作正常。
我的表单php文件是handler.php。
现在进入问题。当我按下提交按钮并且出现错误消息时，它们会出现一个新的空白页面，该页面是相同的URL但它在URL中添加了/handler.php。
我想做的是使错误消息显示在表单下，如果没有错误，我希望它转到我的thankyoumessage.html。
这是表单的php代码：
<?php
/*Set the mail of the reciever*/
$myemail = "mymail@example.com";
/*Display error message*/
function show_error($myError)
{
?>
<html>
<body>
<b>Var snäll och rätta till följande fel:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
/* Check inputs */
function check_input($data, $problem='error')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
// if ($problem && strlen($data) == 0)
// {
// show_error($problem);
// }
return $data;
}
if (isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']))
{
/* Check all form inputs using check_input function */
$name = check_input(utf8_decode($_POST['name']));
$subject = check_input(utf8_decode($_POST['subject']));
$email = check_input(utf8_decode($_POST['email']));
$message = check_input(utf8_decode($_POST['message']));
/* If e-mail is not valid show error message */
if (!preg_match("/([w-]+@[w-]+.[w-]+)/", $email))
{
show_error("Email adressen är inte giltig...");
echo "<script type='text/javascript'>alert('$message');</script>";
}
/*If name is empty show error message */
if (empty($_POST['name']))
{
show_error("Du måste skriva in ditt namn...");
}
/*If email is empty show error message */
if (empty($_POST['email']))
{
show_error("Du måste skriva in din email...");
}
/*If message is empty show error message */
if (empty($_POST['message']))
{
show_error("Ett meddelande krävs om du önskar att få hjälp av oss...");
}
/* Prepare the message for the e-mail */
$mail =utf8_decode("
Hej!
Ditt kontakt formulär har blivit besvarat av:
Namn: $name
E-mail: $email
Kundens meddelande:
$message
Meddelande slut.
");
echo "Tack för du kontaktar oss! n Vi återkommer med ett svar så snart som möjligt!";
/* Send the message using mail() function */
mail($myemail, $subject, $mail);
}
else
{
?><span><?php echo "Fyll i alla fälten...";?></span> <?php
}
?>
这是表单的Html：
<form class="mt-5 ml-5 mr-5" method="POST" action="handler.php" id="reused_form">
<p id="contactForm" class="h4 text-center mt-5"><strong>Kontakta oss</strong></p>
<!-- input text(Name) -->
<div class="md-form">
<i class="fa fa-user prefix">*</i>
<input type="text" name="name" id="name" class="form-control">
<label>Ditt namn</label>
</div>
<!-- input email -->
<div class="md-form mt-5">
<i class="fa fa-envelope prefix">*</i>
<input type="email" id="name" name="email" id="email" class="form-control validate">
<label data-error="Fel" data-success="Rätt">Din email</label>
</div>
<div class="md-form mt-5">
<i class="fa fa-user prefix"></i>
<input type="text" id="subject" name="subject" class="form-control">
<label>Ämne</label>
</div>
<!-- input message -->
<div class="md-form mt-5">
<i class="fa fa-pencil prefix">*</i>
<textarea type="text" name="message" id="message" maxlength="5000" class="form-control md-textarea" rows="3"></textarea>
<label>Meddelande</label>
</div>
<div class="text-center mt-4 mb-4">
<button class="btn danger-color" name="submit" type="submit">Skicka</button>
</div>
</form>
如果你不想使用 AJAX，你可以让 mail(( 函数处理与以下内容相同的页面中的表单：
<?php
// we declare empty error variables
$error = $error_email = $error_name = $error_subject = $error_message = "";
if (isset($_POST['submit']))
{
/* Check all form inputs using check_input function */
$name = check_input(utf8_decode($_POST['name']));
$subject = check_input(utf8_decode($_POST['subject']));
$email = check_input(utf8_decode($_POST['email']));
$message = check_input(utf8_decode($_POST['message']));
/* If e-mail is not valid show error message */
if (!preg_match("/([w-]+@[w-]+.[w-]+)/", $email))
{
$error_email = "Email adressen är inte giltig...";
}
/*If name is empty show error message */
if (empty($_POST['name']))
{
$error_name = "Du måste skriva in ditt namn...";
}
/*If email is empty show error message */
if (empty($_POST['email']))
{
$error_email = "Du måste skriva in din email...";
}
/*If message is empty show error message */
if (empty($_POST['message']))
{
$error_message = "Ett meddelande krävs om du önskar att få hjälp av oss...";
}
/// You can add the subject validations here as well
if (empty($_POST['subject']))
{
$error_subject = "Ett meddelande krävs om du önskar att få hjälp av oss...";
}
/* Prepare the message for the e-mail */
$mail =utf8_decode("
Hej!
Ditt kontakt formulär har blivit besvarat av:
Namn: $name
E-mail: $email
Kundens meddelande:
$message
Meddelande slut.
");
if(mail($myemail, $subject, $mail))
{
/// We redirect to the thank you mesage uppon a successful message sending
header("Location:thankyoumessage.html");
}
else
{
// Failure message if the mail() function failed to trigger
$error = "Something wrong !";
}
}
?>
<form class="mt-5 ml-5 mr-5" method="POST" action="" id="reused_form">
<p id="contactForm" class="h4 text-center mt-5"><strong>Kontakta oss</strong></p>
<!-- input text(Name) -->
<div class="md-form">
<i class="fa fa-user prefix">*</i>
<input type="text" name="name" id="name" class="form-control" required >
<label>Ditt namn</label>
</div>
<!-- Error name -->
<div class="text-center mt-4 mb-4">
<?php echo $error_name;?>
</div>
<!-- input email -->
<div class="md-form mt-5">
<i class="fa fa-envelope prefix">*</i>
<input type="email" id="name" name="email" id="email" class="form-control validate" required>
<label data-error="Fel" data-success="Rätt">Din email</label>
</div>
<!-- Error email -->
<div class="text-center mt-4 mb-4">
<?php echo $error_email;?>
</div>
<div class="md-form mt-5">
<i class="fa fa-user prefix"></i>
<input type="text" id="subject" name="subject" class="form-control" required>
<label>Ämne</label>
</div>
<!-- Error subject -->
<div class="text-center mt-4 mb-4">
<?php echo $error_subject;?>
</div>
<!-- input message -->
<div class="md-form mt-5">
<i class="fa fa-pencil prefix">*</i>
<textarea type="text" name="message" id="message" maxlength="5000" class="form-control md-textarea" rows="3" required></textarea>
<label>Meddelande</label>
</div>
<!-- Error message -->
<div class="text-center mt-4 mb-4">
<?php echo $error_message;?>
</div>
<div class="text-center mt-4 mb-4">
<?php echo $error;?>
</div>
<div class="text-center mt-4 mb-4">
<button class="btn danger-color" name="submit" type="submit">Skicka</button>
</div>
</form>
听起来您需要在单个页面中执行此操作，但您的表单将定向到第二页(handler.php(。将所有功能都放在一个脚本中，该脚本同时加载表单并处理表单提交，您可能会受益。算法可能是这样的：
$showForm = $showThankYou = false;
$errorMessage = '';
//if form submitted
//check for errors
//if no errors
$showThankYou = true;
//else set error vars appropriately
$errorMessage = '...';
$showForm = true;
// else
$showForm = true;
从这一点开始，您可以将表单和感谢都包含在条件中。您可以在表单 html 中包含错误消息，因为首次加载表单时它将为空。
if($showForm) {
// form code block
}
if($showThankYou) {
// thank you page
}
它将转到/handler.php 因为在表单操作上设置：
<form class="mt-5 ml-5 mr-5" method="POST" action="handler.php" id="reused_form">
如果要在表单提交后保持在同一页面上，则必须将操作留空。相反，您必须设置一个条件来检查是否设置了提交：
if(isset($_POST['submit']){
include('handler.php');
}
在表单下方添加该代码将在用户点击提交时执行脚本(您必须修改它，它必须不是按钮(。
这是仅使用PHP的一种方法。您还可以将所有发送邮件的代码放在一个函数中，并在发送提交时执行它：
function sendMail(){
if (isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']))
{
/* Check all form inputs using check_input function */
$name = check_input(utf8_decode($_POST['name']));
$subject = check_input(utf8_decode($_POST['subject']));
$email = check_input(utf8_decode($_POST['email']));
$message = check_input(utf8_decode($_POST['message']));
/* If e-mail is not valid show error message */
if (!preg_match("/([w-]+@[w-]+.[w-]+)/", $email))
{
show_error("Email adressen är inte giltig...");
echo "<script type='text/javascript'>alert('$message');</script>";
}
/*If name is empty show error message */
if (empty($_POST['name']))
{
show_error("Du måste skriva in ditt namn...");
}
/*If email is empty show error message */
if (empty($_POST['email']))
{
show_error("Du måste skriva in din email...");
}
/*If message is empty show error message */
if (empty($_POST['message']))
{
show_error("Ett meddelande krävs om du önskar att få hjälp av oss...");
}
/* Prepare the message for the e-mail */
$mail =utf8_decode("
Hej!
Ditt kontakt formulär har blivit besvarat av:
Namn: $name
E-mail: $email
Kundens meddelande:
$message
Meddelande slut.
");
echo "Tack för du kontaktar oss! n Vi återkommer med ett svar så snart som möjligt!";
/* Send the message using mail() function */
mail($myemail, $subject, $mail);
}
else
{
?><span><?php echo "Fyll i alla fälten...";?></span> <?php
}
}
更改提交代码
<?php
include('handler.php');
if(isset($_POST['submit'])){
sendMail();
}
?>
还有其他方法，但这两种方法可能会以仅使用 PHP 的方式解决您的问题。
希望对您有所帮助。
PD：您的姓名和电子邮件输入具有相同的ID。
听起来你需要JavaScript，因为用户永远不会离开页面。 如果你做了处理程序.php返回一些json而不是一个页面，这将非常容易。 首先，我会把你所有的HTML放在一个名为contact.html的文件中，这样你就可以引用一个与你当前所在的页面不同的页面。 如果将空<p class="errorMsg"></p>添加到所需的任何位置，则在出现错误之前，它将不可见。
然后，您可以将以下脚本添加到名为submitForm.js的文件中，将<script src="submitForm.js"></script>添加到contact.html的头部。
const formElement = document.querySelector('form')
const formData = new FormData(formElement)
formElement.onsubmit = event => {
event.preventDefault()
fetch('/handler.php', { method: 'POST', body: formData })
.then(response => response.json())
.then(json => {
const errorElement = document.querySelector('errorMsg')
errorElement.textContent = json.errorMsg
if (json.errorMsg !== '') document.location = '/thankyoumessage.html'
})
}
分解一下，fetch 是发出 ajax 请求的一种非常简单的方法。 您的用户将停留在当前页面上，但您的代码将转到 URL 并获取其数据以在当前页面上使用。fetch()发出请求，then()在获得响应后同步处理它。 在这里，我链接了两个then()，因为我需要先将其解析为 json，然后才能访问该数据。 最后一个then()是如何处理表单提交。
详细了解抓取
Fetch 是一个新的 Web API，它依赖于 ES6 功能，可能与旧版浏览器不兼容。 我仍然鼓励你使用它，因为即使需要IE11支持，只需要一个polyfill和一个语法转换器就可以为你完成所有工作。
现在，要使获取像这样工作，您需要在handler.php中放入一些东西。 您可以使用第一个代码段中的所有代码，省略 HTML。 您只需构建一个字符串并回显它即可返回 JSON，无需 html。 您可以通过将 show_error(( 函数调用更改为分配 $errorMsg 变量来实现这一点，如下所示。
if (!preg_match("/([w-]+@[w-]+.[w-]+)/", $email))
{
$errorMsg = "Email adressen är inte giltig...";
}
然后在文件末尾，您可以像这样编写 JSON 字符串而不是 HTML。
echo '{ "errorMsg" : "' . $errorMsg . '" }';
现在，如果您的表单仍然点击该页面并显示电子邮件错误，您将看到以下内容：
{ "errorMsg" ： "Email adressen är inte giltig..." }
。显然你不想看到这一点，但是你的JavaScript可以在没有你的用户看到的情况下看到它，并且JavaScript确切地知道如何处理这些数据，就像我们上面看到的那样。 然后，您可以向该 JSON 添加任意数量的内容，以便您的实时 JavaScript 可以使用它执行其他操作。
了解有关 JSON 的更多信息