提交表单后想要在特定 div 中回显 "Email sent!"

Question

我正在为我的网站添加一个联系表单。当我单击“提交”按钮时，它会向我发送电子邮件，然后将用户重定向到域。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 = "myemail@domain.com";
$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

Answer 1

要使 alert-msg 起作用，PHP 需要高于 html。

这有很多错误，因为您没有对 post 数据进行清理，这让您很容易受到攻击。

这里有一些建议 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 表单，并在同一页面的 HTML 上方包含您的 PHP 脚本。使用提交按钮，删除 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>

我省略了您 post 编辑的其余部分 HTML，因为没关系。

提交表单后想要在特定 div 中回显 "Email sent!"

Want to echo "Email sent!" in a specific div after form is submitted

html

php

contact-form