Loading Screen (or similar) on submit

[mcuk]

I have a basic page which has a PHP form. It creates a record and uploads a picture.

When they user clicks submit, I need it to display a "loading" notice of some description.

I was using this:

<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:fixed;
z-index:1;
border:3px double #999;
background:#f7f7f7;
width:400px;
height:300px;
margin-top:150px;
margin-left:-150px;
position:absolute;
text-align:center;
line-height:100px;
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:18pt;
}
</style>

and then placed a div in the page but it shows the message right at the top of the screen. As the form is long, the user cannot see the message.

I need to create some sort of notice so users know the form is being processed.

Please help!!!! :-)

[MartinRinehart]

Your 'load' element is first given a 'position: fixed;' and then 'position: absolute;'. 'fixed' is a position on screen, screen coordinates. 'absolute' is a position within its enclosing element. If the enclosing element is 'document.body' this could be scrolled off the screen. When one style overrides an earlier style, like 'absolute' overrides 'fixed' here, the earlier style is just ignored. You may be able to make this go by just deleting the 'position: absolute' line.

A nice solution would be to put the "I'm working on it" message near the button that the user clicks. Surround button and message element with a div to keep 'em together. Set the message to 'display: none;' initially. Switch it on when the button is clicked.