javascript - 加载程序显示后重置按钮

Question

大家好，我正在尝试创建一个按钮，该按钮在提交时变成加载程序，然后在表单成功提交后返回到按钮。

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

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;

.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);
  }
}

<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>

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();
        }
}