Question

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

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

问题是，当我们点击“提交”时，我不确定在哪里显示此脚本。我正在使用表单的Validation插件，因此我不太确定是否应将其放在验证脚本中的 submitHandler 下，或者在单独的事件下提交按钮。

在验证插件下

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

根据事件本身

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

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

Answer 1

您的班级名称错误删除了.之前的gif，

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

你的代码应该是，

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

Answer 2

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

ajax ---＆gt;

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

Answer 3

HTML

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

CSS

.formprocessgif {
     display: none;
}

JQuery

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

});

jQuery - 如何在单击“提交”按钮时显示Loading.gif

3 个答案: