时间戳

首页 > 解决方案 > 想要回显“已发送电子邮件！” 提交表单后在特定的 div 中

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

问题描述

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

联系方式.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 = "myemail@domain.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
echo "Email sent!";
?>

索引.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>

页面点击提交后： 邮件已发送！在带有 URL 的空白页面中

标签： phphtmlcontact-form

解决方案

要使 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 = "myemail@domain.com";
 $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 之上。使用提交按钮，删除 onclick 部分，因为您使用 PHP 直接发送表单并将 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，因为没关系。

推荐阅读