Question

我有一个用户在手机上填写的表格，用户点击提交按钮后，我会弹出一个旋转的轮子，这样用户就不会再次点击提交按钮了。

不幸的是，如果他们的手机信号微弱，则旋转轮不会出现，用户再次点击提交按钮。这导致提交两种表格。

如果我在点击时隐藏按钮，我不会有相同的程序吗？真正的问题是，当用户点击提交按钮时，由于信号微弱，请求仍在处理中吗？还有哪些其他解决方案？

#divLoading
{
display : none;
}
#divLoading.show
{
display : block;
position : fixed;
z-index: 100;
background-image : url('spinner.gif');
background-color:#666;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;

}

<script>
$(document).ready(function(){
   $("#saveandsubmitbutton").click(function(){
       $("div#divLoading").addClass('show');
   });
});
</script>

Answer 1

作为多次提交表单的额外保护，您应该在按下后立即禁用提交按钮。

<input type="submit" onclick="this.disabled = true" value="Submit"/>

来源：How to submit form only once after multiple clicking on submit?

正如上面评论的JD6969，您还可以预加载spinner.gif图像。我在另一个问题中找到了一个很好的方法：

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['spinner.gif']).preload();

来源：Preloading images with jQuery

Answer 2

你应该预先加载spinner.gif。

<img src="spinner.gif" id="spinner">

#spinner { position:absolute; left:-9999px; top:-9999px }

Answer 3

<script>
$(document).ready(function(){
   $("#saveandsubmitbutton").click(function(){
       $("div#divLoading").addClass('show');
       $(document).off("click","#saveandsubmitbutton");
    });
  });
 </script>

当有弱信号时，旋转轮

3 个答案: