在form.submit(）时加载gif

Loading gif while form.submit()

本文关键字：加载 gif form submit      更新时间：2023-09-26

我在按钮class="submit"上有这个JS：

$( ".submit" ).click(function( event ) {
                    
        if(some checks){
            ...
        }else{
            $("#importForm").submit(function(event){
                alert("Submitted");
            });
        }
    });

但表单永远不会提交，警报也不会弹出。如果我放弃：

function(event){
  alert("Submitted");
}

它运作良好。知道吗？

编辑：

实际上，我想做的是在提交表单时显示加载gif，就像我在另一个视图中对load()所做的那样：

$("body").load(url, function(){ 
  $('#LoadingGif').empty();
});      
$('#LoadingGif').empty().html('<img src="/assets/image/loader.gif" width=31 height=31 alt="Loading image" />');

这段代码： 

$("#importForm").submit(function(event){
    alert("Submitted");
});
向

元素添加一个事件侦听器（大概是一个<form>），但不调用它。因此，如果.submit不是表单中的按钮，则应将其更改为：

$( ".submit" ).click(function( event ) {
    if(some checks){
        ...
    }else{
        $("#importForm").submit(function(event){ // add event listener
            alert("Submitted");
        }).submit(); // actually submit the form
    }
});

http://jsfiddle.net/2yz6a9L5/1/

编辑答案 ：您必须使用 AJAX 发送表单数据，因为以标准方式提交表单会产生新请求，因此当前页面卸载并且浏览器等待来自服务器的响应，这意味着没有地方显示 gif。

您可以使用此代码

$(document).ready(function(){
   $('form#you_form_id').submit(function(){
     $('div#wait_overlay').show();
});
});

Overleydiv 代码将是：

<div id="wait_overlay"  style="opacity: 0.5; height: 100%; width: 100%; position: fixed; left: 0px; top: 0px; z-index: 1001;">
<img src="/assets/image/loader.gif" width=31 height=31 alt="Loading image" />
</div>

将div#wait_overlay 放在开头的正文标签之后。

相关文章：