表单提交时在浏览器中显示加载 - Show loading in browser while form submit

Show loading in browser while form submit

我使用AJAX来获取一些数据并填写表单。数据是相当大的，所以它需要一些时间从数据库和填写字段，所以当所有做这些东西我显示加载图标。

现在表单中有一个提交按钮，我们希望表单在加载图标消失之前不会被提交。这件事我已经做了。

我使用防止默认-如果用户点击提交按钮之前AJAX完成它的工作和加载图标消失，AJAX完成它的工作后，表单被提交。

但现在的问题是，如果我点击提交-因为防止默认是不显示加载图标在浏览器选项卡(所以用户可能会认为表单提交按钮不工作，并多次点击它，(我们得到这个数据从谷歌分析))但是表单会自动提交，当AJAX完成它工作。

是否可以显示"浏览器选项卡加载图标"?

我知道其他东西，比如(隐藏提交按钮等)

下面是我的代码:

$("#formsech").submit(function(event){
submit = -1;
    if ( $("#loading").css('display') == 'none' ){
submit = 1;
    }
    else{
 event.preventDefault();
    }
});
setInterval(function(){
    if(submit == -1){
if($("#loading").css('display') == 'none' ){
    submit = 1;
}
}
}, 100);
setInterval(function(){ 
if(submit ==  1){
$("#formsech").submit();
submit = 0;
}
}, 100);

如果您正在使用AJAX，您可以简单地这样做:

$(form).submit(function (e) {
  e.preventDefault();
  $(form).css("cursor", "loading");
  $("#loading").show();
  $.post("/path/to/url", $(form).serialize(), function () {
    $("#loading").hide();
    $(form).css("cursor", "initial");
    alert("Saved");
  });
});

一个更好的例子，使用setTimeout只是为了演示的目的。

$(function() {
  $(".loading").removeClass("hidden").hide();
  $("#myform").submit(function() {
    $(".loading").fadeIn();
    setTimeout(function() {
      $(".loading").fadeOut();
    }, 2000);
  });
});

* {
  font-family: 'Segoe UI', sans-serif;
}
.loading {
  background: url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif") center center no-repeat;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 1;
  opacity: 0.5;
}
.hidden {
  display: none;
}
#myform {
  display: block;
  position: relative;
  width: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid #ccc;
  overflow: hidden;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="." id="myform">
  <div class="loading hidden"></div>
  &nbsp;
  <input type="submit" />&nbsp;
</form>

setTimeout只是为了模拟AJAX延迟。z-index将不允许用户按提交按钮

你可以在你的页面中使用下面的html。

<div id="overlay"></div>

css将是

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

在ajax调用之前使用以下代码

$("#overlay").show(500);

ajax调用完成后写入:

$("#overlay").hide();