Question

大家好我想创建一个按钮，在提交后变成装载程序，然后在表单成功提交后返回按钮。

我认为我的问题来自JS。不确定如何在我的JS中添加超时以在一定时间之后或在PHP提交之后隐藏加载器。我的表单通过phpmailer运行，并通过ajax给出一个警告mgs，显示它已被发送，通常mgs需要一段时间才能显示，导致客户重新提交

＆＃13;

function ButtonClicked() {
  document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
  document.getElementById("buttonreplacement").style.display = ""; // to display
  return true;
}
var FirstLoading = true;

function RestoreSubmitButton() {
  if (FirstLoading) {
    FirstLoading = false;
    return;
  }
  document.getElementById("formsubmitbutton").style.display = ""; // to display
  document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;

＆＃13;

.cssload-container {
  position: relative;
  height: 40px;
  width: 40px;
  margin: auto;
  margin-top: 2%;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #08d108;
  border-left-color: rgb(0, 0, 0);
  border-radius: 924px;
  -o-border-radius: 924px;
  -ms-border-radius: 924px;
  -webkit-border-radius: 924px;
  -moz-border-radius: 924px;
}

.cssload-whirlpool {
  margin: -23px 0 0 -23px;
  height: 40px;
  width: 40px;
  animation: cssload-rotate 1450ms linear infinite;
  -o-animation: cssload-rotate 1450ms linear infinite;
  -ms-animation: cssload-rotate 1450ms linear infinite;
  -webkit-animation: cssload-rotate 1450ms linear infinite;
  -moz-animation: cssload-rotate 1450ms linear infinite;
}

.cssload-whirlpool::before {
  content: "";
  margin: -21px 0 0 -21px;
  height: 41px;
  width: 41px;
  animation: cssload-rotate 1450ms linear infinite;
  -o-animation: cssload-rotate 1450ms linear infinite;
  -ms-animation: cssload-rotate 1450ms linear infinite;
  -webkit-animation: cssload-rotate 1450ms linear infinite;
  -moz-animation: cssload-rotate 1450ms linear infinite;
}

.cssload-whirlpool::after {
  content: "";
  margin: -27px 0 0 -27px;
  height: 52px;
  width: 52px;
  animation: cssload-rotate 2900ms linear infinite;
  -o-animation: cssload-rotate 2900ms linear infinite;
  -ms-animation: cssload-rotate 2900ms linear infinite;
  -webkit-animation: cssload-rotate 2900ms linear infinite;
  -moz-animation: cssload-rotate 2900ms linear infinite;
}

@keyframes cssload-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}

＆＃13;

<div class="col-md-4 col-md-offset-4">
  <div id="formsubmitbutton">
    <button onclick="ButtonClicked()" name="submit" type="submit" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
  </div>
  <div id="buttonreplacement" style="display:none;">
    <div class="cssload-container">
      <div class="cssload-whirlpool"></div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您应该从ajax请求中调用ButtonClicked和RestoreSubmitButton，如下所示：

function sendFormData(){
    ButtonClicked(); //Start to display loading indicator before sending the request

   $.ajax({
         url:'ServiceToFetchDocType',
         type:'post',
         cache:false,
         success: function(response){
             /* Ajax has now completed so you can re-render the button now*/
             RestoreSubmitButton();
        }
}

加载程序显示后重置按钮

1 个答案: