Progressbar doesn't stickaround onSubmit- HELP! 1

heckler0077 · May 20, 2007

Hello. I haven't gotten around to learning js yet, so I found the script that I needed online. I actually combined it with another to make what I need, which is that when you click on a button or a link or something like that, if you have specified a certain href (for the link) or onSubmit (for a form) or onClick (for a specific button, ie submit in the form) it pops up a processing bar. I want to add this to certain pages so that when you click the submit button, the js progress bar shows for about 2 seconds, and then it goes to the page that the form's action attribute specified, carrying whatever form data it needs. I want to be able to use post or get as my method. All of this works fine, if, instead of a submit button, I use a regular button, because I'm not specifying an action, so the clicking of the button just launches the processing bar. When I have an action and a button that sends the form data, such as submit, I run into my problem: the processing bar pops up for a moment and freezes, because the next page is starting to load, so even though the old page is still there for a few seconds while the new page loads, the javascript processing bar is still there, but not moving. How do I get this to work correctly, which once again, is that the user presses the submit button, the processing bar shows for about two seconds, and then it's okay if it freezes after the two seconds while the new page loads. The page is located at

http://softworksdesign.com/progress_bar_test.html

and you can look at the source to find the locations of the js documents and where they are in the page. Thank you!

BabyJeffy · May 20, 2007

Here is an inline example of how you can do this. In this example, I run the function showProgressBar() when the submit is clicked, then I set a timer to submit the form again in 2 seconds.

Code:

<html>
<head>
	<script type="text/javascript">
	function showProgressBar(form) {
		form.style.backgroundColor='red';
	}
	</script>
</head>
<body>
	<form name="myForm" onsubmit="showProgressBar(this);window['hndl']=(typeof window['hndl']=='undefined'||window['hndl']==null)?setTimeout('document.forms[\''+this.name+'\'].submit();',2000):null;return(window['hndl']==null);">
		<input type="submit" value="Click to send">
	</form>
</body>
</html>

Hope you can unravel it!

Cheers,
Jeff

[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

heckler0077 · May 20, 2007

I am having a hard time integrating that with the current code. It works fin on it's own, and thank you very much, but I'm having trouble trying to get it to work.

heckler0077 · May 20, 2007

Here is the complete code without Jeff's additions:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>

<script type="text/javascript">

</script>

<title></title>
</head>
<body>
<style type="text/css">
@import url("/css/progress_bar.css");
</style>

<script type="text/javascript">
<!--
//Progress Bar script- by Todd King (tking@igpp.ucla.edu)
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (

http://javascriptkit.com)

for script

var duration=10 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar

var _progressBar = new String("");
var _progressEnd = 10;
var _progressAt = 0;

// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;

// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
} else if (document.layers) { // Netscape
document.progress.visibility = true;
document.progress.left = (window.innerWidth/2) - 100;
document.progress.top = pageYOffset+(window.innerHeight/2) - 40;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'show';
document.getElementById("progress").style.left = (window.innerWidth/2)- 100;
document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40;
}

ProgressUpdate(); // Initialize bar
}

// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}

// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}

// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.dialog.bar
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}

// Demonstrate a use of the progress dialog.
function Demo() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}

function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}

function CallJS(jsStr) { //v2.0
return eval(jsStr)
}
-->
</script>
<script type="text/javascript">

</script>

<form name="form2" action="/" onSubmit="CallJS('Demo()')" method="post">
<center>
<input type="submit" name="submit" value="Submit" />
</center>
</form>

</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Progressbar doesn't stickaround onSubmit- HELP! 1

heckler0077

Programmer

BabyJeffy

Programmer

heckler0077

Programmer

heckler0077

Programmer

Similar threads

Part and Inventory Search

Sponsor