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

对于初学者我们没有这个功能

$('#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();
     }
 });

Answer 2

在

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

回调，你真正需要滑动的是图像而不是表单，因为它已经被隐藏了。

改变你的

$("#sendEmail").slideUp

与

$("#loading").slideUp

Answer 3

我没有测试过任何一个，但如果你改变我会想

$("#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>');                                           
});

它应该可以工作