Disabling form and loading in screen

[Pezmc]

I have just created a digital questionnaire for some year 7's at my school. However the school server is quite slow and the pages take quite a long time to load. Many of the year 7's click the submit button multiple times and wreck the database.

Recently I saw on a website a form that when you submitted it, it filled the screen with 50% opaque black. And in the middle it said loading..., how does this work, does anyone have the script, does anyone have a better solution?

Thanks in advance

[bennyboywonder]

presumably that would be a hidden div containing some sort semi transparent gif which is displayed using the onSubmit handler?

 

Personally I find it easier to have the onSubmit handler call a function which disables the button (or the fields as well if you wish)

document.formname.buttonname.disabled = true

[fenway]

That could be it... or some opacity filter.

[mainewoods]

that technology is similiar to lightbox.js which is free and is currently being used even by ebay to show pop up full size pictures.  I haven't tried it but it's reputed to be highly cross browser compatable.  You could download it and try modifying it for your needs. 

 

For a simpler solution, you can do this:

document.body.style.backgroundColor = "#cccccc";

That changes the background color of the whole document to gray.  You can then put a div at the end of your code(must be at the end) and set it with "position:absolute; top: ???; left:???; display:none;background-color:white;".  Put your message in the div and when the form is submitted do this:

document.body.style.backgroundColor = "#cccccc";
document.getElementById('messagedivID').style.display = 'block';