【问题标题】:PHP contact form with HTML5 validation, display a message?带有 HTML5 验证的 PHP 联系表单,显示消息?
【发布时间】:2013-08-22 11:40:12
【问题描述】:

我有一个有效的 php 联系表单,对输入进行 HTML5 验证(需要添加它们,并输入姓名/电子邮件),但我有一个问题。

发送消息时,它会打开一个新选项卡,并表示感谢您的消息已发送,这是正常的,因为 process.php

<?php
//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;
//Simple server side validation for POST data, of course, 
//you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your message.'; 
//if the errors array is empty, send the mail
if (!$errors) {
    //recipient - change this to your name and email
    $to = 'youremail@email.com';    
    //sender
    $from = $email;

    //subject and the html message
    $subject = 'Hello from ' . $name;    
    $message = '
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
    <table>
        <tr><td>Name: </td><td>' . $name . '</td></tr>
        <tr><td>Email: </td><td>' . $email . '</td></tr>
        <tr><td>Message: </td><td>' . nl2br($comment) . '</td></tr>
    </table>
    </body>
    </html>';
    //send the mail
    $result = sendmail($to, $subject, $message, $from);

    //if POST was used, display the message straight away
    if ($_POST) {
        if ($result) echo 'Thank you! We have received your message.';
        else echo 'Sorry, unexpected error. Please try again later';

    //else if GET was used, return the boolean value so that 
    //ajax script can react accordingly
    //1 means success, 0 means failed
    } else {
        echo $result;    
    }
//if the errors array has values
} else {
    //display the errors message
    for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
    echo '<a href="index.html">Back</a>';
    exit;
}
//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
    $headers .= 'From: ' . $from . "\r\n";

    $result = mail($to,$subject,$message,$headers);

    if ($result) return 1;
    else return 0;
}
?>

但是如何让它在提交按钮下显示消息? 这是 HTML 方面

    <form method="post" action="process.php">
<div class="element">
    <label><i class="icon-user"></i></label>
    <input type="name" name="name" placeholder="write your name here" class="text" required/>
</div>
<br>
<div class="element">
    <label><i class="icon-envelope"></i></label>
    <input type="email" name="email" placeholder="write your e-mail here" class="text" required/>
</div>
<br>
<div class="element">
    <label><i class="icon-comment"></i></label>
    <textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea>
</div>
<br>
<div class="element el-submit">

    <input class="submit" type="submit" id="submit"/>

</div>
</form>

我的意思是,当我按下提交按钮并且没关系时,我想显示一条消息,例如“您的消息已发送”,但我希望它在提交按钮下,而不是在新页面中

【问题讨论】:

    标签: php html validation message contact


    【解决方案1】:

    将文件合二为一,以便您POST数据到与下面相同的文件中

    <?php
    if($_POST) //If the form is submitted
    {
    $notification="";  //Used for catching all your messages
    //Retrieve form data. 
    //GET - user submitted data using AJAX
    //POST - in case user does not support javascript, we'll use POST instead
    $name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
    $email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
    $website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
    $comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
    //flag to indicate which method it uses. If POST set it to 1
    if ($_POST) $post=1;
    //Simple server side validation for POST data, of course, 
    //you should validate the email
    if (!$name) $errors[count($errors)] = 'Please enter your name.';
    if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
    if (!$comment) $errors[count($errors)] = 'Please enter your message.'; 
    //if the errors array is empty, send the mail
    if (!$errors) {
    //recipient - change this to your name and email
    $to = 'youremail@email.com';    
    //sender
    $from = $email;
    
    //subject and the html message
    $subject = 'Hello from ' . $name;    
    $message = '
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
    <table>
        <tr><td>Name: </td><td>' . $name . '</td></tr>
        <tr><td>Email: </td><td>' . $email . '</td></tr>
        <tr><td>Message: </td><td>' . nl2br($comment) . '</td></tr>
    </table>
    </body>
    </html>';
    //send the mail
    $result = sendmail($to, $subject, $message, $from);
    
    //if POST was used, display the message straight away
    if ($_POST) {
        if ($result) echo 'Thank you! We have received your message.';
        else $notification.= 'Sorry, unexpected error. Please try again later';
    
    //else if GET was used, return the boolean value so that 
    //ajax script can react accordingly
    //1 means success, 0 means failed
    } else {
        $notification.= $result;    
    }
    //if the errors array has values
    } else {
    //display the errors message
    for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
    $notification.= '<a href="index.html">Back</a>';
    exit;
    }
    //Simple mail function with HTML header
    function sendmail($to, $subject, $message, $from) {
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
        $headers .= 'From: ' . $from . "\r\n";
        $result = mail($to,$subject,$message,$headers);
        if ($result) return 1;
        else return 0;
    }
    } //First If loop
    ?>
    <form method="post" action="process.php">
    <div class="element">
    <label><i class="icon-user"></i></label>
    <input type="name" name="name" placeholder="write your name here" class="text" required/>
    </div>
    <br>
    <div class="element">
    <label><i class="icon-envelope"></i></label>
    <input type="email" name="email" placeholder="write your e-mail here" class="text" required/>
    </div>
    <br>
    <div class="element">
    <label><i class="icon-comment"></i></label>
    <textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea>
    </div>
    <br>
    <div class="element el-submit">
    
    <input class="submit" type="submit" id="submit"/>
    <?php
    if(!empty($notification)) //This will display notification after submit
    {
    echo $notification;
    }
    ?>
    </div>
    </form>
    

    您还可以利用 AJAX 来实现您所需要的。 以下教程是最好的示例。

    1. http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

    2. http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html

    3. http://www.phpeveryday.com/articles/jQuery-AJAX-Form-Submission-P973.html

    【讨论】:

      【解决方案2】:

      如果您不想在下一页上显示,请创建弹出窗口以显示感谢消息,它看起来很棒。 以这种方式使用您的 html 代码。

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
      <script>
      function myFunction()
      {
      alert("Thanks for  mail!");
      }
      </script>
      </head>
      
      <body>
      <form method="post" action="process.php">
      <div class="element">
          <label><i class="icon-user"></i></label>
          <input type="name" name="name" placeholder="write your name here" class="text" required/>
      </div>
      <br>
      <div class="element">
          <label><i class="icon-envelope"></i></label>
          <input type="email" name="email" placeholder="write your e-mail here" class="text" required/>
      </div>
      <br>
      <div class="element">
          <label><i class="icon-comment"></i></label>
          <textarea name="comment" placeholder="write your message here" class="text textarea"required></textarea>
      </div>
      <br>
      <div class="element el-submit">
      
          <input type="button" onclick="myFunction()" value="Submit">
      
      </div>
      </form>
      </body>
      </html>
      

      【讨论】:

        【解决方案3】:

        到目前为止,在回复中遗漏的重要一点是 action="some.php" 如果您删除服务器端 PHP,则应将其更改为 action="";因此,“post”的动作在联系表格内。我找到了关于这个主题的综合教程,涉及 HTML5 CSS3 和 PHP here

        【讨论】:

          猜你喜欢
          • 2016-06-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-06-22
          • 2015-05-17
          • 1970-01-01
          相关资源
          最近更新 更多