同一页面上的联系表单错误消息

Question

我有一个有效的 php 代码，但是当用户单击“发送”时，它会将他带到一个空白页面，上面写着“感谢发送”或显示错误。这是我的 php 代码和 html 表单。我希望错误和成功文本显示在第一个输入上方。我用 iframe 试过它，它工作，但我不能改变字体颜色，所以我不能真正使用它。表单位于名为inquiry.html 的HTML 文件中，而PHP 位于inquiry.php 中

<form method="post" action="inquiry.php">

    <h2>CONTACT US</h2>

    <p>We are here to answer any questions you may have about our company. Reach out to us and we'll respond as soon as
        we can. </p>

    <input id="input" name="name" placeholder="Your Name">

    <input id="input" name="email" type="email" placeholder="Your Email">

    <input id="input" name="subject" type="subject" placeholder="Subject">

    <textarea id="textarea" name="message" placeholder="Your Message"></textarea>

    <input id="submit" name="submit" type="submit" value="Send">

</form>

<?php

    if(isset($_POST['email'])) {                     

        // EDIT THE 2 LINES BELOW AS REQUIRED

        $email_to = "leonstopar1@gmail.com";

        $email_subject = $_POST['subject'];;


        function died($error) {

            // your error code can go here

            echo "We are very sorry, but there were error(s) found with the form you submitted. ";

            echo "These errors appear below.<br /><br />";

            echo $error."<br /><br />";

            echo "Please go back and fix these errors.<br /><br />";

            die();         
        }

        // validation expected data exists

        if(!isset($_POST['name']) ||

            !isset($_POST['email']) ||

            !isset($_POST['subject']) ||

            !isset($_POST['message'])) {

            died('We are sorry, but there appears to be a problem with the form you submitted.');       

        }         


        $name = $_POST['name']; // required

        $email_from = $_POST['email']; // required

        $subject = $_POST['subject']; // not required

        $message = $_POST['message']; // required


        $error_message = "";

        $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

      if(!preg_match($email_exp,$email_from)) {

        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

      }

        $string_exp = "/^[A-Za-z .'-]+$/";

      if(!preg_match($string_exp,$name)) {

        $error_message .= 'The Name you entered does not appear to be valid.<br />';

      }

      if(strlen($message) < 2) {

        $error_message .= 'The Message you entered do not appear to be valid.<br />';

      }

      if(strlen($error_message) > 0) {

        died($error_message);

      }


        function clean_string($string) {

          $bad = array("content-type","bcc:","to:","cc:","href");

          return str_replace($bad,"",$string);

        }


        $email_message .= "Name: ".clean_string($name)."\n";

        $email_message .= "Email: ".clean_string($email_from)."\n";

        $email_message .= "Message: \n\n".clean_string($message)."\n";


    // create email headers


    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
    $headers .= "From: ".$name."\r\n" .
    "Reply-To: ".$name."\r\n" .
    "X-Mailer: PHP/" . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);  

?>


<!-- include your own success html here -->


Thank you for contacting us. We will be in touch with you very soon.



<?php

?>

Answer 1

在您的联系表单中，在您的第一个输入之前添加一个 div（您希望显示结果的位置）

<div id="result"></div>

在同一个文件中添加一个包含以下内容的脚本标签

如果您已包含jQuery

$.ajax({
  type: 'POST',
  url: 'inquiry.php',
  success: function(resp) {
     $("#result").text("success!");
  },
  error: function() {
     $("#result").text("error!");
  }
});

如果你还没有 jQuery

var request = new XMLHttpRequest();
request.open('POST', 'inquiry.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
    document.getElementById("result").textContent = resp;
  } else {
    // We reached our target server, but it returned an error
    document.getElementById("result").textContent = "error!";
  }
};

request.onerror = function() {
  // There was a connection error of some sort
  document.getElementById("result").textContent = "error!";
};

request.send();

最后在您的inquiry.phpfile 中确保您return 或echo 您想要显示的内容