Waiting message on slow redirection - ajax

Question

I have the following code:
<?PHP
if (isset($_POST['submit'])) {
header("Location: http://mysite.com");
}
?>
<form name="form1" action="" method="post">
Name: <input name="name" type="text">
<input type="submit" value="submit" name="submit">
</form>
The problem is that when I submit the form the redirection to mysite.com takes too long time, 5-10s.
I would like to display a messege "Loading... Please wait" och show an animated image so that I know that something is happening.
How do I do in javascript och ajax?

Answer 1

I don't know if it's possible (but I don't think so) but you could add exit(); after setting the header so the rest of the script isn't executed and sent to the browser. That could reduce the time a bit.
What you could try is to do the redirection with javascript instead of a http header.
<?php if (isset($_POST['submit'])): ?>
<script>
alert('Loading... Please wait');
document.location.href = 'http://mysite.com';
</script>
<?php endif; ?>

Answer 2

5-10 secs to submit the page. First of all try to figure out why it is taking that much time.
ANyways, If you just want to see some message when you press submit button, then simply you can add any div ( with initially hidden ). And on click of submit button you can show this div.
See the sample code:
<?PHP
if (isset($_POST['submit'])) {
header("Location: http://mysite.com");
}
?>
<div id='loadingDIV' style='display: none;'></div>
<form name="form1" action="" method="post">
Name: <input name="name" type="text">
<input type="submit" value="submit" name="submit" onclick='showLoadingAndSubmit();'>
</form>
function showLoadingAndSubmit(){
document.getElementById ('loadingDIV').innerHTML = 'Form submitting. Please wait...';
document.getElementById ('loadingDIV').style.display = 'block';
return true;
}

Answer 3

you should have something like this
the loading has image GIF moving until the ajax request end and then the loading become hidden
where result has the database result grid search on screen
<tr valign="top">
<td id="results" colspan="8" align="center" width="100%" height="250px">
</td>
</tr>
<tr valign="top" id="loading" style="display:none;">
<td colspan="8" width="100%" align="center">
<img name="loading_image" src="images/loading.gif" border="0" width="214" height="200">
</td>
</tr>
function search(tableEvent){
try
{
document.getElementById('loading').style.display="";
var params = 'formAction=' + document.mainForm.formAction.value;
params += '&tableEvent=' + tableEvent;
params += '&txtActionDivisionDesc=' + document.mainForm.txtActionDivisionDesc.value;
createXmlHttpObject();
sendRequestPost(http_request,'Controller',false,params);
ValidationResult();
}
catch(e)
{
alert(e.message);
}
}
function ValidationResult()
{
try
{
if (http_request.readyState == 4)
{
var errors = http_request.responseText;
errors = errors.replace(/[\n]/g, '');
if (window.ActiveXObject)
{// code for IE
xmlRecords=new ActiveXObject("Microsoft.XMLDOM");
xmlRecords.loadXML(errors);
}
else
{
xmlRecords=document.implementation.createDocument("","",null);
parser=new DOMParser();
xmlRecords=parser.parseFromString(errors,"text/xml");
}
document.getElementById('loading').style.display="none";
document.getElementById('results').innerHTML = errors;
http_request = false;
}
}//end try
catch(e)
{
document.getElementById('results').innerHTML = errors;
return;
}
}