Replacing Submit Button with 'Loading' Image

When a form submission takes a second or so with nothing happening, the form user is likely to click the submit button again. Then the wait starts all over. Eventually, the user becomes frustrated and leaves.

If you can't speed up your website or speed up the software processing the form submission, replace the submit button with a "loading" image. (The image may also be referred to as a "preloading" or "working" image.)

The loading image generally is animated. It is designed to let the user know something is indeed happening and please, give it a minute to process.

The Loading Image

To replace the submit button with a loading image, you'll need a loading image to use.

If you don't have a loading image and don't know how to make one, there are a number of generators online. Do a search for "loading image generator" (with or without quotes) to find some.

Replacing the Submit Button

In a moment, I'll describe how to replace the submit button with the loading image. But first, here is an example.

Clicking the button will replace the button with a loading image. That's all the demo will do. If this were a real form instead of only a submit button replacement example, the thank-you page would be loading momentarily.

How To Do It – Overview

The submit button and the loading image are in divs. Both divs have an id value; (They can be in other containers, like p or span. But I'll use div in the following code.)

The div with the submit button is published. The div with the loading image has a style display:none; to make it unpublished.

The submit button tag has an onclick="ButtonClicked()" element.

The JavaScript ButtonClicked() function below the form refers to the two divs' id values.

When the submit button is clicked, the JavaScript ButtonClicked() function unpublishes the div with the submit button and publishes the div with the loading image.

Here is the code of the previous example. The parts referred to above are in blue.

<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="//www.willmaster.com/images/preload.gif" alt="loading...">
</div>

<script type="text/javascript">
/*
   Replacing Submit Button with 'Loading' Image
   Version 2.0
   December 18, 2012

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/
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;
</script>

How To Do It – Step By Step

1. In the form submit button tag, insert this attribute:

   onclick="ButtonClicked()"

2. Put the form submit button tag into a div or other HTML container tag, like p or span. Give the div an id value. (id values need to be unique on the page.)

3. Immediately following the submit button div tag, put a div tag with your loading image (or tag other than div if needed to match the submit button's tag). The div with the image needs an id with a value different than the submit button div id's value. It also needs a CSS style display:none;

4. Below the form, put this JavaScript:

   <script type="text/javascript">
   /*
      Replacing Submit Button with 'Loading' Image
      Version 2.0
      December 18, 2012
   
      Will Bontrager Software, LLC
      https://www.willmaster.com/
      Copyright 2012 Will Bontrager Software, LLC
   
      This software is provided "AS IS," without 
      any warranty of any kind, without even any 
      implied warranty such as merchantability 
      or fitness for a particular purpose.
      Will Bontrager Software, LLC grants 
      you a royalty free license to use or 
      modify this software provided this 
      notice appears on all copies. 
   */
   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;
   </script>
   
   

   Do these two customizations with the above JavaScript:

   1. Replace "formsubmitbutton" with the id value of the div containing the submit button.

   2. Replace "buttonreplacement" with the id value of the div containing the loading image.

You are good to go :)

When the submit button is clicked, the submit button disappears and the loading image appears in its place.

Will Bontrager