asked on

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.

rbudj

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"

Vipin Kumar

ASKER

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.

Edwin Hoffer

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

Ray Paseur

Here is how I've done it.
https://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

ASKER CERTIFIED SOLUTION

Vipin Kumar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Vipin Kumar

ASKER

I was able to find a solution before anyone else would provide a solution