Display A Popup "please Wait" Message

[creacon]

I have a page with a form that when the submit button is pressed, executes a php script and then calls a second form. The problem is that there's a 5 to 10 second delay before the second form displays. I'd like to be able to display a "Please Wait" message either by a popup or on the first form itself. I tried a javascript alert box, but that requires pressing an OK button before the second form will be called. I checked out the html createPoopup() method, but that only works in IE. I don't know how to display a message right on the first page after the submit button is pressed.Is there any way to display a small popup message that will close when the second form displays, or some way to make a hidden message become visible on the first page, after submit?

[jeffman]

You'll do it in javascript. First, you need to capture the form's submit event. (You need an onsubmit function.) Before releasing the form, you modify the display property of an invisible page element. It could be an image or just some text. In CSS, the element is defined with display:none . That makes it invisible. In JavaScript, you change that property to something that is visible, like block. THEN you release the event. That is, your function returns true. For as long as the original page sticks around, the element is visible. Obviously, is disappears when the page is replaced.That's the method, anyway. I don't know your skill level, so I don't know what else you need to know.

[creacon]

You'll do it in javascript. First, you need to capture the form's submit event. (You need an onsubmit function.) Before releasing the form, you modify the display property of an invisible page element. It could be an image or just some text. In CSS, the element is defined with display:none . That makes it invisible. In JavaScript, you change that property to something that is visible, like block. THEN you release the event. That is, your function returns true. For as long as the original page sticks around, the element is visible. Obviously, is disappears when the page is replaced.That's the method, anyway. I don't know your skill level, so I don't know what else you need to know.

Thank you for the response. That's just the way I wanted to do it, but didn't know how. As for my skill level, believe me when I say I'm a dinosaur, so after 50 years of programming, Two weeks ago I decided to try my hand at web programming, and suddenly I feel as though I've never seen a computer before. As for what I need to know, suffice it to say EVERYTHING.Actually, I do understand the concept of your explanation, and making a hidden location visible is really what I wanted t do, but haven't been able to find any information about how to do that. I already have a php script that captures the submit and machinates some data before calling the next page. My first question is, how do I execute a javascript function from php, or vice versa. Here's the <form>'s and the submit button's code:

        <form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">............  <input type="submit" name="submit" id="submit" value="Start" tabindex="12" style="color:#009; font-weight:bold">

The php script saves the data from the form fields to a file (temporarily) and then calls the next form. Heres the jist of it:

  <?php	if (isset($_POST['submit']))		{    	.........		echo '<META http-equiv="refresh" content="5;URL=WOTCPg2.php">';				}?>

I'm not sure at this point, how to execute the javascript to make the hidden wait message visible, and also how to reference the CSS property to do that.

[justsomeguy]

You just need to show the message before submitting the form, and it will go away whenever the page gets refreshed. This is sort of the idea:

<script type="text/javascript">function do_submit(){  document.getElementById("wait_msg").style.display = "block";  return true; // allow form to submit}</script>...<div id="wait_msg" style="display: none;">Please wait...</div><form ... onsubmit="return do_submit();">

The div can have images or whatever you want in it. You could also add an ID to the form and set the form to hidden when you display the wait message.

[jeffman]

EDIT. I see JSG has posted some stuff while I was writing. Maybe this can still be of service.The first thing to clarify is the difference between PHP and JavaScript. PHP runs on the server. Some scripts operate independently of user input, some scripts operate in response to POST or GET data. I'm getting the idea that yours is the latter.Now conceptually, you can think of your script responding to an event that takes place in the browser. But literally, mechanically, that is not what happens at all. Your server does not know or care if your user clicked a button, moused over an image, whatever. All it knows is POST or GET and the data that came to it by one of those methods. So let's not be talking about PHP capturing a browser event.In fact, JavaScript doesn't interact with PHP at all, at least not directly. JavaScript does not call a PHP function, and PHP does not execute a JavaScript function.JavaScript can alter form data and even cause a form to be submitted. Whether a PHP script calls a certain function or not depends on the PHP script itself: how it responds to the POST or GET data.PHP is a document preprocessor. It executes statements that determine what an HTML document contains. It might, for example, look in a database, find the user's first name, and then print that name in a pretty little box. It does not directly call JavaScript statements, because after it processes the document, it stops running, and the data connection is broken.But since PHP can write text, it can write a JavaScript script so that certain statements are executed on page load or in response to other user-triggered events. Think of the way you set a mousetrap. You do that on a Tuesday and leave for vacation. On Friday, a mouse comes along and trips the trap. We might say that you "authored" the mousetrap. But really, it's the mouse and the spring that did all the work. In this situation, you are behaving the way PHP behaves. You create conditions (in a script) that respond to changes. Then you go away (PHP stops running). When a mouse event happens, it's registered by the trap (the document and JavaScript).So PHP can create conditions in which JavaScript is executed. But it does not execute JavaScript itself.When I speak of capturing a document event, I'm referring entirely to JavaScript. A script on your page contains a function that responds to an event. In this case, the event is a submit event. The function can respond to the submit event and do stuff before the form gets submitted. Under the right circumstances, the function can even cancel the form submission. We won't do that here. We'll just make an invisible thing turn visible. Then we'll let the form get submitted as usual. Capture, do something, release.So here's a miniature document that does what we've talked about. How your PHP script responds to it is up to you.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=utf-8">		<title></title>		<style type="text/css">			div#my_message {				display: none;			}		</style>		<script type="text/javascript">			function show_message () {				var el = document.getElementById("my_message");				el.style.display = "block";				return true;			}		</script>	</head>	<body>		<div id="my_message">Please wait!</div>		<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return show_message()">			<!-- some junk -->			<input type="submit" name="submit" id="submit" value="Start" tabindex="12" style="color:#009; font-weight:bold">		</form>	</body></html>

Note. For clarity's sake, I have not written all of this according to best practice. (It is preferable to assign event handlers in the script itself, rather than the form tag.) But it certainly works.Write back if you need this explained any further.On an unrelated topic: in PHP, we normally redirect output by printing a location header instead of a meta refresh tag. Read about headers here: http://us2.php.net/manual/en/function.header.php

[chibineku]

And just to be fussy, though it's normal to redirect by using a header("Location: gohere.php"), if you have already started some output, then echoing a meta refresh is your only choice. I have redirect pages after actions such as signing in, and these are PHP instead of JavaScript redirects in case users have JS turned off. So the easiest way is to show my output and echo the meta refresh.

[creacon]

Thanks, all of you, for your help. I tried both of the above solutions, and got the same problem with each. When I submit the form, the message becomes visible sure enough, but only for a split instant. Then the page apparently refreshes and the message goes away, then the 5 - 10 second delay before the second page is displayed. How do I either keep the page from refreshing, or make the message stay visible after the refresh?Also re:

On an unrelated topic: in PHP, we normally redirect output by printing a location header instead of a meta refresh tag. Read about headers here: [url="http://us2.php.net/manual/en/function.header.php"]http://us2.php.net/manual/en/function.header.php[/url]

I don't even know what "meta refresh tag" means. In a previous post I asked how to make a page call another from php, and the two answers I got were the meta and the header. I tried the header first as follows:

		header('Location: WOTCPg2.php');

but it didn't work (it's still in there commented out). I then tried the meta thing

		echo '<META http-equiv="refresh" content="5;URL=WOTCPg2.php">';

and it worked, so I kept it. Now that I'm looking at it, would changing that "refresh" fix my problem, and if so, what are the other options for that?

[creacon]

Well guess what. Your advice about the meta thing spurred me to look it up, and I found that the "5" in the code was the number of seconds to wait till the next page displayed. I changed it to "0" and VOILA! the called form displayed almose instantly, negating the need for the "Please Wait" message.I still want to thank you very much for your responses, and DD's explanation was very enlightning. I'm sure I'm going to have some use for that logic in the future, so I'm keeping it for that eventuality.

[jeffman]

I did wonder when the delay was happening, and almost asked. Something about your first post led me to think that the first document was hanging around for a while. Ah well.