ajax - 隐藏 Ajax 感谢消息，3 秒后显示主窗体

Question

我正在创建一个带有 jQ​​uery Validation 和 jQuery Ajax 提交的联系我们表单。

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

这是我的 HTML 代码规范：

<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 Validation 和 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. 

}

$("#contactForm").hide();Ajax 成功后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);
 }