根据联系表单状态隐藏/显示不同的div

时间：2014-03-14 13:40:10

标签： jquery html twitter-bootstrap

我正在尝试创建一个简单的联系表单。当它成功时，一个div显示在表单上方的成功消息，如果有错误，另一个div显示错误尝试agin。我有下面的代码，我写了我想要代码的地方，我不知道要放什么代码。

感谢您的回复。我尝试了你的建议但它没有用，但这里是我的页面和表格的完整代码。我不介意使用一些ajax或JavaScript，但我对这些语言不太满意。 

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>My Math Contact Form</title>

<!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<!--placeholder fix-->
<script  src="js/placeholder.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('[placeholder]').placeholder();


});

</script>


<style type="text/css"> 
.number-field { width: 100px;display: inline; margin-left:5px;} 
</style> 

</head>

<body>
<?php
if(isset($_POST['submit'])) {

      $errors = array();

      if($_POST['name'] == "") {
         $errors[] = true;
      }
      if($_POST['email'] == "") {
         $errors[] = true;
      }
       if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
          $errors[] = true;
      }
      if($_POST['subject'] == "") {
         $errors[] = true;
      }
      if($_POST['comment'] == "") {
         $errors[] = true;
      }
      if ($_REQUEST['captcha_entered']!=$_SESSION['rand_code']) { 
         $errors[] = true;
      }
      if(count($errors) == 0) {
         $sendto = "luke@allthingsscene.co";//Your email goes here
         $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
         $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
         $subject = $_POST['subject'];//You can change your subject here
         $comment = filter_var($_POST['comment'], FILTER_SANITIZE_STRING);

         $message = "<strong>$name</strong> has sent you a message by using the contact form:

        <p><strong>Name:</strong> <em>$name</em></p>

        <p><strong>Email:</strong> <em>$email</em></p>

        <p><strong>The subject:</strong> <em>$subject</em></p>

        <p><strong>Message:</strong> <em>$comment</em></p>";

        $headers = "From: $name <$email> \r\n";
        $headers .= "X-Mailer:PHP/\r\n";
        $headers .= "MIME-Version:1.0\r\n";
        $headers .= "Content-type:text/html; charset=iso-8859-1\r\n";

         if(mail($sendto, $subject, $message, $headers)) {
             $success = true;
         } else {
             $success = false;
         }
    } else {
       $success = false;

    }
  }

  if(isset($_POST['submit'])) {
     if($success == true) {
         echo "make error div show";
     }
     if($success == false) {
         echo "make error div show";
     }
 }

?>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="jumbotron" style="margin-top:30px;" >
            <h1 class="text-center" style="color: #39b3d7;">
                    Welcome to my contact form
                </h1>

<!-- bootstrap form -->
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
   <p><label for="name">Name </label><input type="text" class="form-control" name="name" placeholder="Name" id="name"></p>

   <p><label for="email">Email </label><input type="text" name="email" class="form-control" placeholder="youremail@email.com" id="email"></p>

   <p><label for="subject">Subject </label><input type="text" name="subject" class="form-control" placeholder="Subject" id="subject"></p>

   <p><label for="comment">Message </label><textarea name="comment" class="form-control" rows="3" placeholder="Drop a line"></textarea></p>

<?php echo '<img src="captcha.php" />'; ?><input name="captcha_entered" placeholder="Answer" class="form-control number-field" type="text" id="captcha_entered" size="5" maxlength="2" />
     <input type="hidden" name="captcha_total" id="captcha_total" value="<?php echo $_SESSION['rand_code']; ?>" />

   <p style="margin-top:20px;"><input type="submit" name="submit" class="btn btn-info" value="Send Form"></p>
 </form>
<!-- bootstrap form END-->

 </div>
  </div>
   </div>
    </div>
</body>
</html>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：1)

你现在使用任何javascript来处理表单还是直接的php？您想使用任何类型的javascript（ajax）来处理表单，还是想要传统的表单提交？

如果这是你的所有代码，看起来你只是在使用php。

你会想要这样的东西：

<?php
$output = '';
if ( $_POST['submit'] )
{
    $errors = array();

    if($_POST['name'] == "") {
        $errors[] = true;
    }

    if($_POST['email'] == "") {
        $errors[] = true;
    }

    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
        $errors[] = true;
    }

    if($_POST['subject'] == "") {
        $errors[] = true;
    }

    if($_POST['comment'] == "") {
        $errors[] = true;
    }

    if ($_REQUEST['captcha_entered']!=$_SESSION['rand_code']) { 
        $errors[] = true;
    }

    if(count($errors) == 0) {
        $sendto = "luke@allthingsscene.co";//Your email goes here
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
        $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
        $subject = $_POST['subject'];//You can change your subject here
        $comment = filter_var($_POST['comment'], FILTER_SANITIZE_STRING);

        $message = "<strong>$name</strong> has sent you a message by using the contact form:

       <p><strong>Name:</strong> <em>$name</em></p>

       <p><strong>Email:</strong> <em>$email</em></p>

       <p><strong>The subject:</strong> <em>$subject</em></p>

       <p><strong>Message:</strong> <em>$comment</em></p>";

       $headers = "From: $name <$email> \r\n";
       $headers .= "X-Mailer:PHP/\r\n";
       $headers .= "MIME-Version:1.0\r\n";
       $headers .= "Content-type:text/html; charset=iso-8859-1\r\n";

       if(mail($sendto, $subject, $message, $headers)) {
           $success = true;
       } else {
           $success = false;
       }
    } else {
        $success = false;
    }

    if ($success === true )
    {
        $output .= '<div id="success"><p>Your Success Message Here!</p></div>';
    }
    else
    {
        $output .= '<div id="fail"><p>Your Fail Message Here!</p>';
        $output .= '<ul>';
        for ($i = 0; $i < $errors.length; i++ )
        {
            $output .= '<li>'.$errors[i].'</li>';
        }
        $output .= '</ul>'; 
        $output .= '</div>';
    }

    echo $output;
}
else
{
 ?>

 <div class="container">
     <!-- all of your html "stuff" goes here -->
 </div>

<?php
}
相关问题
最新问题