PHP 按“发送”后变量未打印出来

PHP variable not printing out after pressing 'Send"

在我的联系表单中,我想在用户按下 "Send" 按钮后在容器底部显示“"Message sent, thank you for contacting us!"。我已将 php 变量包含在 div 标记在我的 HTML 中。但是当我按下发送时,它会转到一个空白页面,而不是停留在同一页面上并显示消息。可能是什么问题?

/*----------------- START OF FORM -----------------     */    
    
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

* {
 margin:0;
 padding:0;
 box-sizing:border-box;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-font-smoothing:antialiased;
 -moz-font-smoothing:antialiased;
 -o-font-smoothing:antialiased;
 font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}

body {
 font-family:"Open Sans", Helvetica, Arial, sans-serif;
 font-weight:300;
 font-size: 12px;
 line-height:30px;
 color:#777;
/* background:#0CF;*/
}

.error {
    color: red;
}

.success {
    color: #ff9966;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.container5 {
 max-width:500px;
 width:100%;
 margin:0 auto;
 position:relative;
    float: left;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
 background:#F9F9F9;
 padding:25px;
 margin: 0;
}

#contact h3 {
 color: #F96;
 display: block;
 font-size: 30px;
 font-weight: 400;
}

#contact h4 {
 margin:5px 0 15px;
 display:block;
 font-size:13px;
}

fieldset {
 border: medium none !important;
 margin: 0 0 10px;
 min-width: 100%;
 padding: 0;
 width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
 width:100%;
 border:1px solid #CCC;
 background:#FFF;
 margin:0 0 5px;
 padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
 -webkit-transition:border-color 0.3s ease-in-out;
 -moz-transition:border-color 0.3s ease-in-out;
 transition:border-color 0.3s ease-in-out;
 border:1px solid #AAA;
}

#contact textarea {
 height:100px;
 max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
 cursor:pointer;
 width:100%;
 border:none;
 background:#0CF;
 color:#FFF;
 margin:0 0 5px;
 padding:10px;
 font-size:15px;
}

#contact button[type="submit"]:hover {
 background:#09C;
 -webkit-transition:background 0.3s ease-in-out;
 -moz-transition:background 0.3s ease-in-out;
 transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
 outline:0;
 border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

#sendButton{
    background-color: rgba(204, 204, 204, 0.52);
    color: black;
    width: 60px;
    font-weight: bold;
}

    
/*----------------- END OF FORM -----------------     */  
<link rel="stylesheet" href="form.css" type="text/css">
<div class="container5">  
<form id="contact" action="form_process.php" method="POST">    
    <h3>Contact</h3>
    <h4>Contact us today, and get reply with in 24 hours!</h4>
    <fieldset>
      <input placeholder="Your name" type="text" name="name"  tabindex="1" autofocus>
      <span class="error"><?= $name_error ?></span>
    </fieldset>
    <fieldset>
      <input placeholder="Your Email Address" type="text" name="email"  tabindex="2">
      <span class="error"><?= $email_error ?></span>
    </fieldset>
    <fieldset>
      <input placeholder="Your Phone Number" type="text" name="phone"  tabindex="3">
      <span class="error"><?= $phone_error ?></span>
    </fieldset>
    <fieldset>
      <textarea  name="message" tabindex="5">
      </textarea>
    </fieldset>
    <fieldset>
       <input class=sendButton  type="submit" value="Send">
    </fieldset>
    <div class="success"><?= $success ?></div>
  </form>
</div>

PHP:

<?php 

// define variables and set to empty values
$name_error = $email_error = $phone_error = "";
$name = $email = $phone = $message  = $success = "";

//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $name_error = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $name_error = "Only letters and white space allowed"; 
    }
  }

  if (empty($_POST["email"])) {
    $email_error = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $email_error = "Invalid email format"; 
    }
  }

  if (empty($_POST["phone"])) {
    $phone_error = "Phone is required";
  } else {
    $phone = test_input($_POST["phone"]);
    // check if e-mail address is well-formed
    if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)) {
      $phone_error = "Invalid phone number"; 
    }
  }



  if (empty($_POST["message"])) {
    $message = "";
  } else {
    $message = test_input($_POST["message"]);
  }

  if ($name_error == '' and $email_error == '' and $phone_error == '' ){
      $message_body = '';
      unset($_POST['submit']);
      foreach ($_POST as $key => $value){
          $message_body .=  "$key: $value\n";
      }

      $to = 'thisura812@yahoo.com';
      $subject = 'Contact Form Submit';
      if (mail($to, $subject, $message_body)){
          $success = "Message sent, thank you for contacting us!";
          $name = $email = $phone = $message = '';
      }
  }

}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

根据文件名尝试更新后的代码,它应该可以工作:

form_process.php

    <?php

// define variables and set to empty values
$name_error = $email_error = $phone_error = "";
$name = $email = $phone = $message = $success = "";

//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["name"])) {
        $name_error = "Name is required";
    } else {
        $name = test_input($_POST["name"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
            $name_error = "Only letters and white space allowed";
        }
    }

    if (empty($_POST["email"])) {
        $email_error = "Email is required";
    } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $email_error = "Invalid email format";
        }
    }

    if (empty($_POST["phone"])) {
        $phone_error = "Phone is required";
    } else {
        $phone = test_input($_POST["phone"]);
        // check if e-mail address is well-formed
        if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i", $phone)) {
            $phone_error = "Invalid phone number";
        }
    }


    if (empty($_POST["message"])) {
        $message = "";
    } else {
        $message = test_input($_POST["message"]);
    }

    if ($name_error == '' and $email_error == '' and $phone_error == '') {
        $message_body = '';
        unset($_POST['submit']);
        foreach ($_POST as $key => $value) {
            $message_body .= "$key: $value\n";
        }

        $to = 'thisura812@yahoo.com';
        $subject = 'Contact Form Submit';
        if (mail($to, $subject, $message_body)) {
            $success = "Message sent, thank you for contacting us!";
            $name = $email = $phone = $message = '';
        }
    }

}

function test_input($data)
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);

    return $data;
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>

<div class="container5">
    <form id="contact" action="form_process.php" method="POST">
        <h3>Contact</h3>
        <h4>Contact us today, and get reply with in 24 hours!</h4>
        <fieldset>
            <input placeholder="Your name" type="text" name="name" tabindex="1" autofocus>
            <span class="error"><?= $name_error ?></span>
        </fieldset>
        <fieldset>
            <input placeholder="Your Email Address" type="text" name="email" tabindex="2">
            <span class="error"><?= $email_error ?></span>
        </fieldset>
        <fieldset>
            <input placeholder="Your Phone Number" type="text" name="phone" tabindex="3">
            <span class="error"><?= $phone_error ?></span>
        </fieldset>
        <fieldset>
          <textarea name="message" tabindex="5">
          </textarea>
        </fieldset>
        <fieldset>
            <input class=sendButton type="submit" value="Send">
        </fieldset>
        <div class="success"><?= $success ?></div>
    </form>
</div>
</body>
</html>

form.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 30px;
    color: #777;
    /*  background:#0CF;*/
}

.error {
    color: red;
}

.success {
    color: #ff9966;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.container5 {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    float: left;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] {
    font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
}

#contact {
    background: #F9F9F9;
    padding: 25px;
    margin: 0;
}

#contact h3 {
    color: #F96;
    display: block;
    font-size: 30px;
    font-weight: 400;
}

#contact h4 {
    margin: 5px 0 15px;
    display: block;
    font-size: 13px;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
    width: 100%;
    border: 1px solid #CCC;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    -moz-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #AAA;
}

#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}

#contact button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #0CF;
    color: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    font-size: 15px;
}

#contact button[type="submit"]:hover {
    background: #09C;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus, #contact textarea:focus {
    outline: 0;
    border: 1px solid #999;
}

::-webkit-input-placeholder {
    color: #888;
}

:-moz-placeholder {
    color: #888;
}

::-moz-placeholder {
    color: #888;
}

:-ms-input-placeholder {
    color: #888;
}

#sendButton {
    background-color: rgba(204, 204, 204, 0.52);
    color: black;
    width: 60px;
    font-weight: bold;
}

我已经测试过,它正在运行,请查看以下屏幕,我只是添加了一个正确的文件名并且它可以运行。