Question

我使用jQuery Validation和jQuery Ajax提交创建了一个联系我们表单。

通过Ajax显示消息3秒后，用户应该可以看到消息，之后表单应该重新出现。

这是我的HTML codepec：

<form id="contactForm" name="contactForm" method="post" action="">
  <input type="text" placeholder="Name" id="txtName" name="name" class="required" style="color:#999;" /><br />
  <input type="text" name="email" id="txtEmail" placeholder="E-mail" class="required" style="color:#999;" /><br />
  <textarea id="textareaMessage" name="message" rows="5" cols="10" class="required" style="color:#999;"></textarea><br /><br />
  <input class="submit" type="submit" value="Submit"/>
</form>

这是我的jQuery验证和jQuery Ajax提交代码规范：

<script>
  $(document).ready(function(){
    $("#contactForm").validate({
      rules: { 
        name: "required",// simple rule, converted to {required:true} 
        email: {// compound rule 
          required: true, 
          email: true 
        }, 
        message: { 
          required: true 
        } 
      },
      submitHandler: function(form) {
        $.ajax({
          type: "POST",
          url: "send.php",
          data: $(form).serialize(),
          timeout: 3000,
          success: function() {
            $('#divContactFrm').html("<div id='divSuccessMsg'></div>");
            $('#divSuccessMsg').html("Thank you! Your message has been sent to us. We will be getting back to you within 24 hours.")
            .hide()
            .fadeIn(1500, function() { $('#divSuccessMsg'); });
          },
          error: function() {
            $('#divContactFrm').html("<div id='divErrorMsg'></div>");
            $('#divErrorMsg').html("Something is going wrong...")
            .hide()
            .fadeIn(1500, function() { $('#divErrorMsg'); });
          }
        });
        return false;
      }     
    });
  });
</script>

任何帮助将不胜感激。

Answer 1

  submitHandler: function(form) {


        $.ajax({
          type: "POST",
          url: "send.php",
          data: $(form).serialize(),
          timeout: 3000,
          success: function() {
            $("#contactForm").hide();
            $('#divContactFrm').html("<div id='divSuccessMsg'></div>");
            $('#divSuccessMsg').html("Thank you! Your message has been sent to us. We will be getting back to you within 24 hours.")
            .hide()
            .fadeIn(1500, function() { $('#divSuccessMsg'); });
           setTimeout(resetAll,3000);
          },
          error: function() {
            $('#divContactFrm').html("<div id='divErrorMsg'></div>");
            $('#divErrorMsg').html("Something is going wrong...")
            .hide()
            .fadeIn(1500, function() { $('#divErrorMsg'); });
          }
        });
        return false;
      }

并且

function resetAll(){
 $("#contactForm").show();
$('#divSuccessMsg').remove(); // Removing it as with next form submit you will be adding the div again in your code. 

}

一旦Ajax成功并$("#contactForm").hide();成为setTimeout(resetAll,3000); ......

，请注意success Handler's End

如果这解决了你的问题，请告诉我。

Answer 2

尝试使用成功功能：

jQuery(form_id).fadeOut('slow', function() {
        jQuery(thanks_id).fadeIn('slow');
        jQuery(form_id)[0].reset();
});

setTimeout(function (){

        jQuery(thanks_id).fadeOut('slow', function() {
            jQuery(form_id).fadeIn('slow', function(){});
            jQuery(form_id)[0].reset();
        });

}, 3000);

Answer 3

在提交之前隐藏表单，然后在ajax回调函数中使用以下代码

 $('#divId').text(" successfully").show().delay(2000).fadeOut(400);
 $('#contactForm').show();

Answer 4

使用setTimeOut，在3秒后隐藏div。

 success: function() {
   $('#divSuccessMsg').html("Thank you!.")
      setTimeout(function(){
        $('#divSuccessMsg').fadeOut();
    },3000);
 }

3秒后隐藏Ajax感谢消息并显示主表单

4 个答案: