jQuery - 如何显示加载.gif单击提交按钮 - jQuery - How to show Loading.gif when clicking Submit Button

jQuery - How to show Loading.gif when clicking Submit Button

我有一个表格，允许我们输入数据和上传文件。当我单击提交按钮时，我希望显示一个加载.gif文件，让人们知道表单正在处理中。以下是我隐藏的 DIV

<div class="formprocessgif" style="display:none;"><img src="images/spiffygif_50x50.gif" align="center"> We are processing your submssion. Please wait...</div>

问题是，当我们单击"提交"时，我不确定在哪里显示此脚本。我正在为表单使用验证插件，所以我不太确定我应该把它放在验证脚本中的 submitHandler 下，还是放在提交按钮的单独事件下。

在验证插件下：

submitHandler: function(form) {
    $(".formprocess.gif").show();  
    $(form).submit();
}

在事件本身下

$("#papersubmitform").submit(function(event) {
    $(".formprocess.gif").show();  
    $(form).submit();       
});

不幸的是，两者都不起作用..我在这里缺少什么吗？

你的类名是错误的，删除gif之前的.，比如，

$(".formprocessgif").show();

你的代码应该是，

$("#papersubmitform").submit(function(event) {
    $(".formprocessgif").show();
    // ------------^ remove dot from here
    $(form).submit();       
});

<div id="formprocessgif"><img src="formprocess.gif"></div>

阿贾克斯--->

$("#papersubmitform").submit(function(event) {
        $("#formprocessgif").show(slow);  // 

    $.ajax({
                   url: 'mail.php',    // your post url
                    type: 'post',
                 data: $('#papersubmitform').serialize(),
                 success: function(response)
                 {
                    // your Action After submit
                }            
            });
    });

HTML

<div class="formprocessgif"><img src="images/spiffygif_50x50.gif" align="center"> We are processing your submssion. Please wait...</div>

CSS的

.formprocessgif {
     display: none;
}

杰奎里

$(form).submit(function() {
     $.ajax({
           type: "POST",
           url: "action.php", //Your URL
           data: $(form).serialize(), //post form data to your url
           success: function() {
                //your action after submit success
           }
     });
     //ajax request start. here we change the display on your class from "none" to "block"
     $(document).ajaxStart(function(){
           $(".formprocessgif").css("display","block");
     });
     //when ajax complete, we change back display to "none" to hidden loading image
     $(document).ajaxComplete(function(){
           $(".formprocessgif").css("display","none");
     });
});