AJAX/JS的聯繫表格 - 隱藏IMG

Question

（需要一些幫助，因爲我是一個新手，以AJAX/JS）

目前正在設法爲網站創建一個AJAX/JS的聯繫表格。表單工作，並能發送電子郵件沒有問題。但是，我正在嘗試按下「submit」按鈕來執行以下工作流程。

1）聯繫表上滑

2）Loading.gif提出

3）表格的信息是通過電子郵件發送

4）Loading.gif消失

5）成功消息在Loading.gif地方

我有1-3和5工作，但不能得到＃4發生。

下面是我在我的submit_form.js拿到代碼：

if(hasError == false) { 
$('#sendEmail').slideUp("fast",function() { 
    $(this).after('<img src="loading.gif" alt="Loading" id="loading" />'); 
}); 

     $.post("sendmail.php", 
      { emailFrom: emailFromVal, subject: subjectVal, message: messageVal }, 
       function(data){ 
        $("#sendEmail").slideUp("normal", function() {     

         $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');           
        }); 
       } 
      ); 
    } 
     $(this).hide(); 
    return false; 

誰能幫助新手嗎？

Answer 1

在

function(data){ 
    $("#sendEmail").slideUp("normal", function() {     
     $("#sendEmail").before('<h1>Success! Your email was sent.</h1>'); 
    }); 
} 

回調，你真正需要的效果基本show是圖像，而不是因爲它已經隱藏的形式。

更改

$("#sendEmail").slideUp 

與

$("#loading").slideUp 

Answer 2

我沒有測試過任何的，但如果你改變我想

$("#sendEmail").slideUp("normal", function() {     

     $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');           
}); 

到

$("#sendEmail").slideUp("normal", function() {     
    $("#loading").hide(); 
    $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');           
}); 

它應該工作

Answer 3

對於初學者來說，我們沒有這個功能

$('#sendEmail').slideUp("fast",function() { 
    $(this).after('<img id="loading" src="loading.gif" alt="Loading"/>'); 
}); 

---

我們可以簡單地做：

$('#sendEmail').slideUp("fast").after('<img id="loading" src="loading.gif" alt="Loading"/>'); 

---

關於我們的$_POST的成功，我們隱藏了表格並加載了圖片。

$.post("sendmail.php",{ emailFrom: emailFromVal, subject: subjectVal, message: messageVal }, 
    success:function(){ 
     $("#sendEmail").slideUp(); 
     $("#loading").hide(); 
    } 
});