Question

当我点击我的联系表单上的发送按钮时，表单本身就消失了，即使电子邮件仍然丢失，也没有显示任何类型的成功消息。下面是php，javascript和html。在此先感谢您的帮助。

<!--[if lte IE 8]>
<script src="js/html5shiv.js"></script><![endif]-->

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/contact.js"></script>
<noscript>
    <link rel="stylesheet" href="css/skel-noscript.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-noscript.css" />
</noscript>


          <!-- Contact Form-->
          <div class="content style4 featured">
       <div class="container small">
       <form id="contact" form method="post">

        <div class="row half">
         <div class="6u"><input type="text" class="text" name="name" id ="name" placeholder="Name" /></div>
           <div class="6u"><input type="text" class="text" placeholder="Email" name="email" id="email"/></div>
      </div>

<div class="row half">
    <div class="12u"><textarea name="text" placeholder="Message" id="message"></textarea></div>
</div>

<div class="row">
    <div class="12u">
        <ul class="actions">
            <li><input type="submit" class="button" value="Send Message" /></li>
            <li><input type="reset" class="button alt" value="Clear Form" /></li>
   <p class="success" style="display:none">Your message has been sent successfully.</p>
            <p class="error" style="display:none">E-mail must be valid and message must   be longer than 100 characters.</p>
        </ul>
    </div>

</div>

</form>

PHP：

<?php
    // Email Submit
    // Note: filter_var() requires PHP >= 5.2.0
    if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']) &&      filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
        // detect & prevent header injections
        $test = "/(content-type|bcc:|cc:|to:)/i";
        foreach ( $_POST as $key => $val ) {
            if (preg_match( $test, $val ))
            exit;
        }

        //send email
        mail( "test@gmail.com", "Contact Form: ".$_POST['name'], $_POST['message'], "From:" .      $_POST['email'] );
    }
?>

JS：

$('#contact').submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

$.ajax({
    type : "POST",
    url : "mail.php",
    data : {name:name,email:email,message:message},
    cache : false,
    success : function() {              
        $("#contact").fadeOut(300);
        $("#notice").fadeIn(400);
    }
});
return false;
});

Answer 1

它消失了，因为你告诉它使用这段代码

$("#contact").fadeOut(300);

但是我没有在任何地方看到你的#notice容器。它应该位于#contact容器之外的某个位置，默认情况下是隐藏的。

在您的联系表格旁边添加以下内容：

<div id="notice" style="display:none">Email sent successfully</div>

但是为了使它正确，你应该检查php是否发送，然后返回像“OK”这样的东西：

if(mail(...)){
    echo "OK";
}

然后在你的javascript回复中捕获该消息以查看它是否真的被发送，如此

success : function(message) {
      if(message=="OK"){
      //then hide and show success
      }
}

Ajax联系表未显示成功

1 个答案: