隱藏阿賈克斯謝謝你的消息，在3秒鐘後，並顯示主窗體

Question

我創建一個jQuery驗證和jQuery的Ajax提交聯繫表格。

通過Ajax被顯示3秒鐘的mesage應該是用戶可見，該形式應當重新出現之後的消息之後。

這裏是我的HTML codespec：

<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提交codespec：

<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();只要阿賈克斯成功，setTimeout(resetAll,3000);一success Handler's End ...

讓我knwo，如果這解決了你的問題。

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秒後隱藏股利。

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