Display a processing image while the submit button is clicked

Hi,

I have successfully created a Web Application which takes inputs from the users and creates their accounts on different devices based on their location. This whole process takes around 60 to 90 seconds. The whole time the users think that nothing is happening and refreshes the page, so I want to display an processing image which shows that some kind of processing is happening and users wait. I haven't found a good example on google. If any one can provide me any or a link which shows I can achieve the same would be helpful.

If you are providing the jquery code then kindly provide the complete jquery code.

Thanks in advance.
LVL 1
Vipin KumarSr. Network EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rbudjCommented:
http://cssload.net/

This is a generator for CSS generation of a "progress bar". Untested but the idea is to display as a <div> loads.

http://hayageek.com/jquery-progress-bar-example/

This example has a demo and shows all code.

Not sure what search terms you are using but you can find plenty of examples by searching for "progress bar" or "progress bar generator"
0
Vipin KumarSr. Network EngineerAuthor Commented:
These both examples are serving my purpose.

My purpose is after the user fills in the form and clicks the submit button, a processing image should come up showing that it is processing the request and user needs to wait. Once the processing is done, the processing image should disappear and the result page be visible.
0
Edwin HofferTechnical ExpertCommented:
Hello leovipin2,

I have the code for what you are looking:

Use the tag just belo <body> tag

<script type="text/javascript">

function check()

{

$("#checking").show();

}

</script>

Open in new window


Use the below tag in your submit button <input> code

onClick="check();" 

Open in new window


Use this code below <input> submit button code, after the closing tag:

<div id="checking" style="display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #f4f4f4;z-index: 99;">
<div class="text" style="position: absolute;top: 45%;left: 0;height: 100%;width: 100%;font-size: 18px;text-align: center;">
<center><img src="load.gif" alt="Loading"></center>
Checking Please Wait! <Br>Meanwhile Please <b style="color: red;">BE ONLINE</b>
</div>
</div>

Open in new window


Hope this will help you. Also i have attached the load.gif image with this.

Thanks
Edwin

load.gif
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ray PaseurCommented:
Here is how I've done it.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_14519-A-jQuery-Progress-Bar.html

Assuming you're at a current level of PHP, there are some built-in functionalities that you might want to take a look at.
http://php.net/manual/en/session.upload-progress.php
0
Vipin KumarSr. Network EngineerAuthor Commented:
Thanks Ray for your input, but I was able to resolve the same before I could read your comments.

@Edwin, your inputs were also not able to resolve my issue, the code that I implemented is provided below.

The below is jQuery code:
jQuery(function($) {
            
    $("#overlay").css({
        opacity : 0.3,
        top     : 0,
        left    : 0,
        width   : $(window).width(),
        height  : $(window).height()
        });

    $("#loading").css({
        top  : ($(window).height() / 3),
        left : ($(window).width() / 2 - 160)
        });
        
    $('form#install').submit(function(e) {
        $('input[type=submit]', this).attr('disabled', 'disabled');
        $('#overlay, #loading').show();
        return true;
        });
});

Open in new window


The below is the code that I need to put after the submit button:
Also add the id="install" to form tag
<div id="overlay"></div>
<div id="loading">
<h3>Processing!!!!</h3>
<br>
Please wait... while we add the MAC Address to the Database!!! It can take few minutes!!!
</div>

Open in new window


The below is the css code:
#overlay{ 
	display: none;
	position: fixed;
	background: #000;
	z-index: 2000; 
}

#loading{ 
	padding: 10px 10px 10px 60px; 
	width: 400px; 
	height: 75px; 
	background: url('../images/ajax-loader.gif?1312925608') 10px 50% no-repeat white; 
	position: fixed; 
	display: none; 
	z-index: 3000; 
}

#loading h3{
	margin: 3px 0 0 0; 
	padding: 0; 
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Vipin KumarSr. Network EngineerAuthor Commented:
I was able to find a solution before anyone else would provide a solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.