如何在提交表单时添加加载gif

Question

关于这个话题的当前问题似乎都没有帮助我，我对此很新，我需要一些帮助。目前我有一个表单，并且在提交时（目前没有任何验证）它使用此函数显示隐藏的div。

function showDiv() {
document.getElementById('showme').style.display = "block";
}

我想添加一个加载gif，在点击按钮后显示约2秒，然后继续显示隐藏的div。 我的表格如图所示 -

<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">

登录按钮在这里

<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">

Answer 1

问题是您的代码中有return false在您提交表单时执行，有效取消提交，因此您的功能无法被调用。

您不应该首先使用内联HTML事件属性，而是单独执行所有JavaScript。的 Here's why.

此外，如果您实际上并未捕获数据并将其发送到任何地方，那么您就不应该拥有form，submit按钮或处理submit事件，您只需要定期button及其click事件。

此外，请勿为您的表单submit命名，因为这会阻止您以编程方式调用其中的submit()方法。

这应该是什么：

＆＃13;

＆＃13;

// Get references to the DOM elements you'll need:
var button = document.getElementById('Login');
var special = document.getElementById("special");
var pleaseWait = document.querySelector(".hidden");

// Set up your event handlers in JavaScript, not with HTML attributes
button.addEventListener("click", function(evt){
  
  // Show the message by removing the class that hides it:
  pleaseWait.classList.remove("hidden");
  
  // Wait 2 seconds and then run a function that re-hides the message and 
  // submits the form.
  setTimeout(function(){
       pleaseWait.classList.add("hidden");
       special.classList.remove("hidden");
  }, 2000);
});

＆＃13;

.hidden {
  display:none;
}

.img {
  width:50%;
  position:absolute;
}

＆＃13;

<form action="#" method="POST" id="myForm">

  <input class="btn_green_white_innerfade btn_medium" 
         type="button" name="Login" id="Login" value="Sign in" 
         width="104" height="25" border="0" tabindex="5">
         
   <img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif">
   <div class="hidden" id="special">Here I am</div>
         
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

function showDiv() {
  document.getElementById('Login').style.display = "none";
  document.getElementById('loadingGif').style.display = "block";
  setTimeout(function() {
    document.getElementById('loadingGif').style.display = "none";
    document.getElementById('showme').style.display = "block";
  },2000);
   
}

  <div id="showme" style="display:none;">You are signed in now.</div>
  <div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
  <form action="#" method="POST" id="hello" onsubmit="return false;">
      <input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
  </form>