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

Posted 2023-03-06

【中文标题】同一页面上的联系表单错误消息

【英文标题】：Contact form error messages on same page

【发布时间】：2015-10-27 05:01:36

【问题描述】：

我有一个有效的 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 = "[e-mail]";

        $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

?>

【问题讨论】：

使用 ajax 请求来捕获成功或错误响应，以便稍后放置在您的 html 文档中的适当位置。

您可以尝试检查这个问题，它是使用 jquery 插件完成的。 ***.com/questions/13671710/…

你还没有在你的联系人中包含你的成功html页面 php填写它然后它会起作用

你必须使用 ajax 调用，有 jquery 或没有它

【参考方案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 您想要显示的内容