asked on

Javascript simple loading image

Hi

I am trying to show a loading animated gif when a form is submitted, and pause the submission for about 4-5 seconds. I have some code, but when it is submitted, the form 'freezes' for 4 seconds, then it will quickly show loading image and submit it.

function loading(millisecondi)
{
		document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
    var now = new Date();
    var exitTime = now.getTime() + millisecondi;
 
    while(true)
    {
        now = new Date();
        if(now.getTime() > exitTime) return;
    }
}

Open in new window

ASKER CERTIFIED SOLUTION

Morcalavin

membership

This solution is only available to members.

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

Start Free Trial

Morcalavin

Stuffed the button code. It should be:

<input type="button" value="Submit" onclick="delay(this.form)">

Open in new window

SOLUTION

Michel Plungjan

membership

This solution is only available to members.

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

Start Free Trial

Michel Plungjan

Morcalavin you also stuffed the passing of the form

The function that does the submit does not know what form was passed when it eventually executes

As you can see from my code you need something like

var theForm = ""
function delay(myform) {
theForm = myform;
document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
window.setTimeout(function(){theForm.submit()}, 4000);
}

I have never used a function inside a setTimeout - I normally pass a functioname in quotes...
Interestingly yours works too

Morcalavin

@mplungjan

No I didn't.
<input type="button" value="Submit" onclick="delay(this.form)">

This button passes the form object to be submitted.

Michel Plungjan

Yes you did

function delay(myform)
{
document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
window.setTimeout(function(){myform.submit()}, 4000); <<<<<<<< when THIS anonymous function executes, there is no more "myform" object available to it
}

Michel Plungjan

No you didn't... How on earth does THAT work???

<script>
function delay(myform) {
document.getElementById('loading').innerHTML = 'loading';
window.setTimeout(function(){ if(myform) { alert('submitting '+ myform.name); myform.submit()} else alert('What form???')}, 4000);
}
</script>

<form name="form1" action="http://www.google.com/search">
<input type="text" name="q" value="javascript scope">
<input type="button" onClick="delay(this.form)" value="Delayed submit">
</form>
<span id="loading"></span>

Morcalavin

Using an anonymous function inside another function extends the scope of the variable to the anonymous function itself. For instance, this works too. Click submit, then the text box, then submit2. You get 'bar' every time, even though foo appears to go out of scope when it's wrapped in the anonymous function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function delay(myform)
{
var foo = 'bar';
document.getElementById('id').onclick = function(){alert(foo)};
}

</script>

<form action="whatever.html">
<input id="id" type="text" value="I am a text box"/><input type="button" value="Submit" onclick="delay(this.form)"/>
<input type="button" value="Submit2" onclick="document.getElementById('id').onclick()"/>
</form>
</body>
</html>

Morcalavin

I don't know why the scope inside an anonymous function carries over the way it does.

SOLUTION

LeeKowalkowski

membership

This solution is only available to members.

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

Start Free Trial

Computer101

Forced accept.

Computer101
Community Support Moderator