在同一页面中显示弹出消息，用于 PHP 的 HTML 联系表答案

【问题标题】：Display Popup Message in Same Page, for HTML Contact Form by PHP在同一页面中显示弹出消息，用于 PHP 的 HTML 联系表
【发布时间】：2020-10-12 18:22:21
【问题描述】：

我的 index.html 上有一个与contact.php 文件配合使用的联系表单。在提交“消息已发送”或“出现问题”的表单后，我需要在不离开 index.html 的情况下显示弹出消息。目前，它在空白页上的弹出窗口中显示消息。

我真的试图解决它，我在这里检查了很多类似的问题，事实上我是 php 和 js 的新手（我就像 Jon Snow，我什么都不知道）而且我只是想不出适合我的情况的解决方案。

感谢您的帮助:)

*PHP 代码：

<?php
  
if($_POST) {
    $visitor_name = "";
    $visitor_email = "";
    $email_title = "";
    $concerned_department = "";
    $visitor_message = "";
    $email_body = "<div>";
      
    if(isset($_POST['visitor_name'])) {
        $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Visitor Name:</b></label>&nbsp;<span>".$visitor_name."</span>
                        </div>";
    }
 
    if(isset($_POST['visitor_email'])) {
        $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']);
        $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
        $email_body .= "<div>
                           <label><b>Visitor Email:</b></label>&nbsp;<span>".$visitor_email."</span>
                        </div>";
    }
      
    if(isset($_POST['email_title'])) {
        $email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Reason For Contacting Us:</b></label>&nbsp;<span>".$email_title."</span>
                        </div>";
    }
      
    if(isset($_POST['concerned_department'])) {
        $concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Concerned Department:</b></label>&nbsp;<span>".$concerned_department."</span>
                        </div>";
    }
    
    
    if(isset($_POST['visitor_message'])) {
        $visitor_message = htmlspecialchars($_POST['visitor_message']);
        $email_body .= "<div>
                           <label><b>Visitor Message:</b></label>
                           <div>".$visitor_message."</div>
                       </div>";
    }
    
    
    if($concerned_department == "billing") {
        $recipient = "test@mail.com";
    }
    else if($concerned_department == "marketing") {
        $recipient = "test@mail.com";
    }
    else if($concerned_department == "technical support") {
        $recipient = "test@mail.com";
    }
    else {
        $recipient = "test@mail.com";
    }
    

    $email_body .= "</div>";
 
    $headers  = 'MIME-Version: 1.0' . "\r\n"
    .'Content-type: text/html; charset=utf-8' . "\r\n"
    .'From: ' . $visitor_email . "\r\n";

    
  
    if(mail($recipient, $email_title, $email_body, $headers)) {
        echo '<script type="text/javascript"> window.onload = function(){
          alert("Thank you for contacting us. You will get a reply as soon as possible.");
        }</script>';
      

    } else {
      echo '<script type="text/javascript"> window.onload = function(){
        alert("We are sorry but the email did not go through.");
      }</script>';

    }
      
} else {
    echo '<script>alert("Something went wrong.")</script>';
}
?>

*HTML 代码：

<div class="form">
          <form action="/php/contact.php" method="post">
            <div class="elem-group">
              <input type="text" id="name" name="visitor_name" placeholder="Your Name" pattern=[A-Z\sa-z]{3,20} required>
            </div>
            <div class="elem-group">
              <input type="email" id="email" name="visitor_email" placeholder="Your E-mail" required>
            </div>
            <div class="elem-group">
              <input type="text" id="title" name="email_title" required placeholder="Reason For Contacting Us" pattern=[A-Za-z0-9\s]{8,60}>
            </div>
            <div class="elem-group">
              <textarea id="message" name="visitor_message" placeholder="Your Message" required></textarea>
            </div>
            <button type="submit" class="button white">Send Message</button>
          </form>
</div>

谢谢！！

【问题讨论】：

标签： javascript php html forms

【解决方案1】：

在我看来，最好的方法是使用 AJAX。我的建议是创建一个 JS 脚本来收集数据并执行 php 代码。

html的小改动：

<div class="form">
    <div class="elem-group">
          <input type="text" id="name" name="visitor_name" placeholder="Your Name" pattern=[A-Z\sa-z]{3,20} required>
    </div>
    <div class="elem-group">
        <input type="email" id="email" name="visitor_email" placeholder="Your E-mail" required>
    </div>
    <div class="elem-group">
        <input type="text" id="title" name="email_title" required placeholder="Reason For Contacting Us" pattern=[A-Za-z0-9\s]{8,60}>
    </div>
    <div class="elem-group">
        <textarea id="message" name="visitor_message" placeholder="Your Message" required></textarea>
    </div>
    <button id="contact_submit" type="submit" class="button white">Send Message</button>
</div>

事实上你已经有了输入的ID，在jQuery中创建用户端代码应该很容易：

$("#contact_submit").click(function(){
    //Collecting data
    let name = $("#name").val();
    let email = $("#email").val();
    let title = $("#title").val();
    let message = $("#message").val();
    
    //AJAX sending data to php code
    $.post("/php/contact.php",
        {
            visitor_name: name,
            visitor_email: email,
            email_title: title,
            visitor_message: message,
        },
        function(response){
            //Response from PHP in alert 
            //for example: if You use echo "Something went wrong" the message in alert will be the same.
            alert(response);
        }
    );
});

我在 PHP 中唯一要改变的是响应：

<?php
  
if($_POST) {
    $visitor_name = "";
    $visitor_email = "";
    $email_title = "";
    $concerned_department = "";
    $visitor_message = "";
    $email_body = "<div>";
      
    if(isset($_POST['visitor_name'])) {
        $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Visitor Name:</b></label>&nbsp;<span>".$visitor_name."</span>
                        </div>";
    }
 
    if(isset($_POST['visitor_email'])) {
        $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']);
        $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
        $email_body .= "<div>
                           <label><b>Visitor Email:</b></label>&nbsp;<span>".$visitor_email."</span>
                        </div>";
    }
      
    if(isset($_POST['email_title'])) {
        $email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Reason For Contacting Us:</b></label>&nbsp;<span>".$email_title."</span>
                        </div>";
    }
      
    if(isset($_POST['concerned_department'])) {
        $concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING);
        $email_body .= "<div>
                           <label><b>Concerned Department:</b></label>&nbsp;<span>".$concerned_department."</span>
                        </div>";
    }
    
    
    if(isset($_POST['visitor_message'])) {
        $visitor_message = htmlspecialchars($_POST['visitor_message']);
        $email_body .= "<div>
                           <label><b>Visitor Message:</b></label>
                           <div>".$visitor_message."</div>
                       </div>";
    }
    
    
    if($concerned_department == "billing") {
        $recipient = "test@mail.com";
    }
    else if($concerned_department == "marketing") {
        $recipient = "test@mail.com";
    }
    else if($concerned_department == "technical support") {
        $recipient = "test@mail.com";
    }
    else {
        $recipient = "test@mail.com";
    }
    

    $email_body .= "</div>";
 
    $headers  = 'MIME-Version: 1.0' . "\r\n"
    .'Content-type: text/html; charset=utf-8' . "\r\n"
    .'From: ' . $visitor_email . "\r\n";

    
  
    if(mail($recipient, $email_title, $email_body, $headers)) {
        echo 'Thank you for contacting us. You will get a reply as soon as possible.';
    } else {
      echo 'We are sorry but the email did not go through.';

    }
      
} else {
    echo 'Something went wrong.';
}
?>

它应该可以工作，我唯一找不到的是“concerned_department”，但我希望你能自己添加它。如果您对此有任何疑问，请告诉我。

【讨论】：

谢谢！我尝试了您的建议，现在确实在同一页面内显示了弹出消息。唯一的问题是，现在它不执行任何类型的验证，将输入中填写的任何内容发送给收件人，甚至全部为空白
您必须在 php 文件中进行验证，如果某些内容为空白或未正确写入，则发送回显响应。

【解决方案2】：

我会建议使用警报框作为弹出窗口。相同的代码是：

示例：
将此添加到您正在检查逻辑的文件中：

if (move_uploaded_file($file, $destination)) {
        $sql = "INSERT INTO files (pdf_file) VALUES ('$filename')";
        if (mysqli_query($conn, $sql)) {
            header("location:form5.php?upload=success");
        }
    } else {
        header("location:form5.php?upload=notsuccess");
    }
}

现在将其添加到您的主文件中：

<?php 
      if (isset($_GET['upload'])) {
        if ($_GET['upload'] == 'success') {
          echo '<script>alert("Data added Successfully")</script>';
        }
        if ($_GET['upload'] == 'notsuccess') {
          echo '<script>alert("Data Not added")</script>';
        }
      }
     ?>

如果事件成功或不成功，这会给您一个警报框，说明相同。

【讨论】：