Question

我正在使用AJAX获取一些数据并填写表单。数据非常大，因此从数据库获取并填写字段需要一些时间，所以在完成这些工作时我正在显示加载图标。

现在表单中有一个提交按钮，我们想要 - 在该加载图标消失之前不应该提交该表单。到目前为止，我已经完成了这件事。

我正在使用防止默认 - 如果用户在AJAX完成其工作之前点击了提交按钮并且加载图标消失了，并且在AJAX完成其工作之后表单已经提交。

但现在问题是，如果我点击提交 - 因为防止默认不显示在浏览器标签中加载图标（因此用户可能认为表单提交按钮不工作并多次点击，（我们从GOOGLE ANALYTICS获得这些数据））但是当AJAX完成时，表单将自动提交。

是否可以显示＆＃34;浏览器选项卡加载图标＆＃34; ？

我知道其他的事情（隐藏提交按钮等等）

这是我的代码：

$("#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);

任何帮助都将受到高度赞赏。

Answer 1

如果您使用的是AJAX，您可以这样做：

x-y

使用$(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"); }); });仅用于演示目的的更好示例。

＆＃13;

setTimeout

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> <form action="." id="myform"> <div class="loading hidden"></div>   <input type="submit" />  </form>仅用于模仿AJAX延迟。 setTimeout将不允许用户按下提交按钮。

Answer 2

您可以在页面中使用以下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();

表单提交时在浏览器中显示加载

2 个答案: