2016-11-09 61 views
0

当使用button这个工程执行脚本:从(直到页面加载装载机显示器)提交

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $('button').click(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

但是,如果使用Submit它不:

我尝试以下操作工作:

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $("form").submit(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

我自己也尝试没有喜悦:

$(input[type="submit"]).click(function() { 

我希望它适用于页面上的所有提交,因此不想使用ID。任何指针都是最受欢迎的。

UPDATE

$("form").submit(function(e) { 

的伎俩。

+0

不会提交表单无论如何刷新页面,使淡入淡出效果不相关?在这种情况下定义“不起作用”。 – David

+0

提交实际上重新加载页面,这是有效地刷新它,你是对的。我想要的是加载器显示按下提交时,然后当页面重新加载隐藏的加载器。正如我所说,如果我使用而不是 RGriffiths

+0

,但它可以完美运行但是如果页面几乎立即被重新加载,那么是不是装载程序仍在执行其工作?看起来这个“工作”很好。你没有看到加载程序的唯一原因是因为实际操作比加载程序发生得更快。这真的是一件坏事吗?你问在重新加载页面之前如何人为地引入延迟? – David

回答

3

您必须阻止表单的默认行为,否则它会提交(并且浏览器将更改为下一页[表单中的动作])。

要禁用submit操作,您需要在submit/click函数中使用event.preventDefault()

如果您确实需要提交表单 - 你可以添加一个变量来检查是否已经阻止submittion,并根据该以防止(或submit函数内提交表单):

var submitPrevented = false; 
$("form").submit(function(e) { 
    if (!submitPrevented) { 
     submitPrevented = true; 
     e.preventDefault() 
    } 
    $(".loader").fadeIn("fast"); 
    $(".overlay").fadeIn(100); 
    var that = this; 
    setTimeout(function() { 
     that.submit(); 
    }, 1000); 
}); 

请注意,我添加了e元素作为该函数的参数。

关于你写的最后一个代码 - 那里有一个语法错误。这是正确的语法:

$('input[type="submit"]').click(function() { 
+0

谢谢,但这阻止了表单发布。正如我所说的,如果我使用

+0

@Rriffiths,请检查更新 – Dekel

+0

谢谢。因为我总是希望页面表单发布,所以实际上有必要。简单地把函数(e)而不是函数()放在一边就可以实现。我赞赏指针。 – RGriffiths