CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashley Blyth
Ashley Blyth

Reputation: 149

How to add a loading gif when submitting a form

None of the current questions asked about this topic seem to help me, I am fairly new to this and I need some help. Currently I have a form, and on submit (currently do not have any validation) it shows a hidden div using this function.

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

I would like to add a loading gif, that shows for around 2 seconds after clicking the button and then carries on to show the hidden div. My form is as shown -

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

The button to log in is here

<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()">

Upvotes: 3

Views: 32929

Answers (2)

Aydin4ik
Aydin4ik

Reputation: 1935

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>

Upvotes: 8

Scott Marcus
Scott Marcus

Reputation: 65825

The issue is that you have return false in your code that executes when you submit the form, effectively cancelling the submit, so your function doesn't get called.

You should not use inline HTML event attributes in the first place and do all your JavaScript separately. Here's why.

Additionally, if you aren't actually capturing data and sending it anywhere, then you shouldn't have a form, a submit button or deal with submit events, you just need a regular button and its click event.

Also, don't name your form submit as this will prevent you from programmatically calling the submit() method on it.

Here's what that should be:

// 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);
});
.hidden {
  display:none;
}

.img {
  width:50%;
  position:absolute;
}
<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>

Upvotes: -1

Related Questions