pause to show processing image

Posted on 2010-01-02
Last Modified: 2012-05-08
I would like to show a 'processing form' image when user clicks submit on a simple html form.
Because my form is very simple the images doesnt even have time to load before the form has been submitted.

How can I delay the submit of the form for 2 seconds?

Below is my javascript to display image on submit.

Ideas would be very helpful!

Many Thanks
<script type="text/javascript">

function loadSubmit() {

ProgressImage = document.getElementById('progress_image');

document.getElementById("progress").style.visibility = "visible";

setTimeout("ProgressImage.src = ProgressImage.src",3000);


return true;



Open in new window

Question by:sjtinsley83
    LVL 81

    Accepted Solution

    Hello sjtinsley83,

    Try : setTimeout("document.myForm.submit();", 3000);

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    	function loadSubmit() {
    	        ProgressImage = document.getElementById('progress_image');
    		document.getElementById("progress").style.visibility = "visible";
    		setTimeout("document.myForm.submit();", 3000);	
    <form name="myForm" id="myForm" action="">
    	<INPUT type=button value="Go to EE" onClick="loadSubmit();">
    <img name="ProgressImage" id="progress" style="visibility:hidden;" src="" alt="ProgressImage">

    Open in new window

    LVL 75

    Expert Comment

    by:Michel Plungjan
    Alternatively use ajax
    LVL 81

    Expert Comment

    Thanks for the points! Happy new year!

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now