堆棧內存溢出
  簡體   English   中英

在同一頁面中顯示彈出消息，用於 PHP 的 HTML 聯系表單

[英]Display Popup Message in Same Page, for HTML Contact Form by PHP

 原文  2020-10-12 18:22:21  5   2    javascript/ php/ html/ forms

問題描述

我的 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>

謝謝！！

2 個解決方案

解決方案1
 1  2020-10-12 23:47:53

在我看來，最好的方法是使用 AJAX。 我的提議是創建一個 JS sript 來收集數據並執行 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.';
}
?>

它應該可以工作，我唯一找不到的是“關注部門”，但我希望你能自己添加它。 如果您有問題，請告訴我。

解決方案2
 -1  2020-10-12 18:53:33

我會建議使用警報框作為彈出窗口。 相同的代碼是：

例子：
將此添加到您正在檢查邏輯的文件中：

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>';
        }
      }
     ?>

如果事件成功或不成功，這將為您提供一個警報框，說明相同。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 同一頁面上的簡單聯系表單成功彈出窗口 PHP表單提交到同一頁面后顯示消息 無法接收來自html-php聯系人表格的消息 PHP表單同頁提交信息 如何通過ajax從html表單和php頁面進行聯系 將PHP聯系人表單加載到單獨HTML頁面上的iframe中？ 如何在HTML中的彈出窗口上顯示聯系表單 如何使用ajax提交HTML表單，進程，並在同一頁面上的DIV中顯示PHP變量 html php javascript表單彈出 將HTML文件中的表單提交到PHP文件並以相同的HTML顯示結果
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM