想要回显“电子邮件已发送！”提交表格后在特定的div中

问题描述

我正在为我的网站实施联系表格。当我单击“提交”按钮时，它将向我发送电子邮件，然后将用户重定向到domain.com/mail.PHP并回显“已发送电子邮件！”在空白的白页中。相反，我想让用户留在index.html中并发送“电子邮件！”。在<div class="alert-msg"></div>内部回显。任何帮助表示赞赏！

contact.PHP：

<?PHP
if(isset( $_POST['fname']))
$name = $_POST['fname'];
if(isset( $_POST['email']))
$email = $_POST['email'];
if(isset( $_POST['subject']))
$subject = $_POST['subject'];
if(isset( $_POST['message']))
$message = $_POST['message'];

$content="Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
$recipient = "[email protected]";
$mailheader = "From: $email \r\n";
mail($recipient,$subject,$content,$mailheader) or die("Error!");
echo "Email sent!";
?>

index.html

<div class="contactcontainer">
  <form action="contact.PHP" method="POST" id="contact-form">

    <label for="fname">Full Name</label>
    <input type="text" id="fname" name="fname" placeholder="Your name" required>

    <label for="email">E-mail</label>
    <input type="text" id="email" name="email" placeholder="E-mail" required>

    <label for="email">Subject</label>
    <input type="text" id="subject" name="subject" placeholder="Subject" required>

    <label for="subject">Message</label>
    <textarea id="message" name="message" placeholder="Your message" style="height:200px" required></textarea>


    <button class="btn btn-outline-light text-uppercase" onclick="document.getElementById('contact-form').submit();" type="submit" name="submit" id="submit">submit</button>
    <div class="alert-msg"></div>

  </form>
</div>

页面点击提交后 Email sent! in blank page with URL

解决方法

要使alert-msg正常运行，PHP必须位于html之上。

这很不对劲，因为您没有清理发布数据，因此很容易受到攻击。

以下是有关PHP的一些建议；

 <?php
 // You should santize input,examples below;
 // $data = strip_tags($data); - this removes tags like <a>
 // $data = trim($data); - this removes whitespace

 // New code
 $status = ""; // First set the alert-msg to a null/empty value so it's not shown before the form is submitted.

 // Listen for when the submit button is clicked
 if (isset($_POST['submit'])) {
 $name = $_POST['fname'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $message = $_POST['message'];

 // Now we have the post data and it has been sanitized we can check to make sure it isn't null/empty
 if ($name == "" || $email == "" || $subject == "" || $message == "") {

 // If any of these values are empty send the alert that email hasn't been sent
 $status = "Email not sent!";
 
 // If all values have some data,continue...
 } else {
 $content = "Name: $name \n Email: $email \n Subject: $subject \n Message: $message";
 $recipient = "[email protected]";
 $mailheader = "From: $email \r\n";
 mail($recipient,$subject,$content,$mailheader) or die("Error!");

 // Set alert-msg value for success
 $status = "Email sent!";

 }
 }
 ?>

通过删除操作来更改HTML表单，并将PHP脚本包含在同一页面的HTML上方。使用提交按钮，在使用PHP直接发送表单时删除onclick部分，并将php值添加到alert-msg div;

新HTML

 <form method="POST" id="contact-form">
 <button class="btn btn-outline-light text-uppercase" type="submit" name="submit" id="submit">submit</button>
 </form>
 <div class="alert-msg"><?php echo $status; ?></div>

我没事的时候就省略了其余的HTML。

contact-form html