Loading...Please Wait message on form submit

[JasonDFR]

I am using an html form to upload video files.

A php script handles the video file once it is uploaded.

When the user presses the submit button, the form continues to display for 3 - 4 minutes while the video is uploaded. Once the file is uploaded and the php script completes its work, the screen changes to a success message.

I would like to display a "Please Wait, uploading your video" message in the middle of the screen while the video file is uploaded.

At first I thought this would be easy to do, but I have not been able to figure it out myself or find a good solution online.

Would someone point me in the right direction please?

Thanks a lot!

Jason

[rangana]

Best way is through AJAX, but:

<script type="text/javascript">
var ray={
ajax:function(st)
	{
		this.show('load');
	},
show:function(el)
	{
		this.getID(el).style.display='';
	},
getID:function(el)
	{
		return document.getElementById(el);
	}
}
</script>
<style type="text/css">
#load{
position:absolute;
z-index:1;
border:3px double #999;
background:#f7f7f7;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
top:50%;
left:50%;
text-align:center;
line-height:300px;
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:18pt;
}
</style>
<div id="load" style="display:none;">Loading... Please wait</div>
<form action="http://www.yahoo.com" method="post" onsubmit="return ray.ajax()">
<input type="text" value="Test" name="q">
<input type="submit" value="Search">
</form>

[JasonDFR]

Rangana,

This works great. Thank you very very much. I looked everywhere for a simple solution like this and couldn't find it.

You are a huge asset to these forums.

I am starting to learn javascript. Once I have a decent foundation, I'll go for AJAX. With AJAX we could have an upload progress bar etc...(I think)

Have a great day.

Jason

[pmilano1]

It seems that this solution works for me, I'm assembling a 6k row table from a Mysql db to a hash, then output.

However, it seems to remove the popup when the content is caching to the client (ie seems to pop it up after it downloads). Is there a way to overcome this and have the popup remain until load is complete in the browser?

[webinsider]

How would I apply this script to a php button confirming an ordering in a shopping cart such as the one below, to tell users to wait while their order is being processed?

<?php
if (is_array($payment_modules->modules)) {
echo $payment_modules->process_button();
}

echo tep_image_submit ('button_confirm_order.gif', IMAGE_BUTTON_CONFIRM_ORDER) . "\n";
?>