Question

我在按钮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" />');

Answer 1

这段代码：

$("#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的地方。

Answer 2

您可以使用此代码

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

和overley div代码将是：

<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放在开始正文标记之后。

在form.submit（）下加载gif

2 个答案: