2017-09-05 139 views
0

在我的聯繫表中,我想顯示「」發送的消息,感謝您與我們聯繫!「在用戶按下「發送」按鈕後的容器底部。我已將PHP變量包含在我的HTML中的div標記中。但是當我按下發送它去到一個空白的白頁而不是停留在同一頁上並顯示消息。可能是什麼問題?按'發送'後PHP變量不打印

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

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

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

 
.error { 
 
    color: red; 
 
} 
 

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

 
.container5 { 
 
\t max-width:500px; 
 
\t width:100%; 
 
\t margin:0 auto; 
 
\t 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 { 
 
\t background:#F9F9F9; 
 
\t padding:25px; 
 
\t margin: 0; 
 
} 
 

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

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

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

 
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea { 
 
\t width:100%; 
 
\t border:1px solid #CCC; 
 
\t background:#FFF; 
 
\t margin:0 0 5px; 
 
\t 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 { 
 
\t -webkit-transition:border-color 0.3s ease-in-out; 
 
\t -moz-transition:border-color 0.3s ease-in-out; 
 
\t transition:border-color 0.3s ease-in-out; 
 
\t border:1px solid #AAA; 
 
} 
 

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

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

 
#contact button[type="submit"]:hover { 
 
\t background:#09C; 
 
\t -webkit-transition:background 0.3s ease-in-out; 
 
\t -moz-transition:background 0.3s ease-in-out; 
 
\t 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 { 
 
\t outline:0; 
 
\t 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 = '[email protected]'; 
     $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; 
} 
+2

你在表單標籤,這將提交表單後form_process.php重定向書面行動=「form_process.php」。那麼,它是在哪個文件名中寫入了php代碼? –

+0

因此,您的空白頁面可能有很多原因。你確定你通過了所有的驗證嗎? – vbrmnd

+0

您可以改爲使用[Ajax](https://en.wikipedia.org/wiki/Ajax_(編程))發佈表單。然後,你仍然會在同一頁面上,並可以做任何你想要的東西,當它張貼。 –

回答

0

根據文件名試試這個更新的代碼,它應該工作:

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 = '[email protected]'; 
     $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; 
} 

我已經測試過它的工作收銀臺下面的畫面,我只是增加了一個正確的文件名,它的工作原理。

Output of the above script after submitting the form:

+0

您是否建議OP應該在form_process.php頁面中複製表單?相反,我會建議在不同的文件中使用html和PHP,並使用Ajax來發布表單。 –

+0

Nop,沒有重複只發送正確的表單請求到同一頁面,因爲他在這裏沒有使用ajax。 –