How to add a loading gif when submitting a form

Question

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

You could use setTimeout... change the `CSS` to display the loading gif, run the setTimeout and within the setTimeout function have this remove/hide the gif and display the input.... `setTimeout(function(){ //Hide gif & show input }, 2000);` Also you shouldn't need the `onclick` attribute for your button if that button is used to submit the form, you already have the `onsubmit` attribute on your form... — NewToJS, Aug 03 '17 at 22:47
How would I go about showing and hiding the gif inside the function, would you be able to help with that? — Ashley Blyth, Aug 03 '17 at 22:54
Well that would all depend on how you currently have the gif in your source code. Include all relevant source code and I'm sure you'll find people can be more specific with answers. At this moment in time you haven't included all the relevant source code... the gif.... the hidden input.... StackOverflow will allow you to create a snippet, this will allow others to run your source code on here so I would recommend you do add one to your question. — NewToJS, Aug 03 '17 at 22:57
I haven't added any code relating to the gif yet, I am really stuck. I only have the gif file in directory. — Ashley Blyth, Aug 03 '17 at 23:01
Then I suggest you add it... you can't hide/show something that doesn't exist on the page... add it via `img` and give it an `ID`, set the `CSS` to `display:none;` and before the Timeout function set the display to block and within the the Timeout function set the display to none... — NewToJS, Aug 03 '17 at 23:04
I have got it to work using aydin's method, however do you know how I can get it to replace the button during the time it's loaded? — Ashley Blyth, Aug 04 '17 at 00:05
Replace the button? What do you mean replace it? replace it with what? You need to be more specific with your question(s) — NewToJS, Aug 04 '17 at 00:29

Aydin4ik · Accepted Answer · 2017-08-04T00:07:20.780

8

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>

edited Aug 04 '17 at 00:07

answered Aug 03 '17 at 23:04

Aydin4ik

1,782
1
14
19

this worked very well, thank you very much, do you know how I would go about replacing the sign in button with this gif until the div shows? – Ashley Blyth Aug 03 '17 at 23:57
You can just hide the button when it is clicked, and it will give you the effect that you are after. I adjusted the above, try running it again. – Aydin4ik Aug 04 '17 at 00:06
You should only get the DOM references once, not every time the callback is executed. – Scott Marcus Sep 10 '22 at 15:53

Scott Marcus · Answer 2 · 2017-08-03T23:17:42.837

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>

How to add a loading gif when submitting a form

2 Answers2