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

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

• javascript
• jquery
• html
• css

• 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 Commented Aug 3, 2017 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 Commented Aug 3, 2017 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 remend you do add one to your question. – NewToJS Commented Aug 3, 2017 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 Commented Aug 3, 2017 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 Commented Aug 3, 2017 at 23:04

2 Answers 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./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>

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./theme/img/pleasewait.gif">
   <div class="hidden" id="special">Here I am</div>
         
</form>