...

View Full Version : auto submit form using ajax every 5 minutes without reloading page



john_zakaria
01-03-2012, 11:04 AM
he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page

i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time..


so i want to submit the form and at the same time i cant reload the page as it is in normal submit form..

so how i can submit form in the background without letting the user knows that the form is submitted???

chump2877
01-03-2012, 01:48 PM
You don't actually submit the form with AJAX -- you just use AJAX to send the current test answers to a server side script for processing (where perhaps you update a database), and you run the AJAX on a timer starting when the page loads, for example:


<!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">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>TITLE</title>
<script type="text/javascript">
// simple AJAX routine
function createAjaxObj()
{
var httprequest = false;
if (window.XMLHttpRequest)
{
// if Mozilla, Safari etc
httprequest = new XMLHttpRequest();
if (httprequest.overrideMimeType)
{
httprequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{
// if IE
try
{
httprequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return httprequest;
}

var ajaxpack = {};
ajaxpack.ajaxobj = createAjaxObj();
ajaxpack.filetype = "txt";

ajaxpack.postAjaxRequest = function(url, parameters, callbackfunc, filetype)
{
ajaxpack.ajaxobj = createAjaxObj(); //recreate ajax object to defeat cache problem in IE
if (this.ajaxobj)
{
this.filetype = filetype;
this.ajaxobj.onreadystatechange = callbackfunc;
this.ajaxobj.open('POST', url, true);
this.ajaxobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.ajaxobj.setRequestHeader("Content-length", parameters.length);
this.ajaxobj.setRequestHeader("Connection", "close");
this.ajaxobj.send(parameters);
}
}
</script>
</head>
<body>

<form method="post" action="">
<p>Question #1: <input type="text" name="elem1" /></p>
<p>Question #2: <input type="text" name="elem2" /></p>
<p>Question #3: <input type="text" name="elem3" /></p>
<p><input type="submit" name="submitform" value="submit" /></p>
</form>

<script type="text/javascript">
window.onload = function()
{
setInterval(function() {
var poststr = '';
var elems = document.forms[0].elements;
for (var i=0; i<elems.length; i++)
{
poststr += (i != 0) ? "&" : "";
poststr += encodeURI(elems[i].name) + "=" + encodeURI(elems[i].value);
}
ajaxpack.postAjaxRequest('http://yoursite.com/updateExamAnswers.php', poststr, null, 'txt');
}, 300000);
};
</script>

</body>
</html>

Old Pedant
01-03-2012, 07:19 PM
Though RJ's answer will work, it's overly complex, especially if you need to submit many <form> fields each time. The process of encoding all those form fields for the send() call is a pain in the patootie.

There's a dirt simple answer that DOES NOT use AJAX!!!!

Submit the <form> to a *hidden* IFRAME! And now the browser will do all that encoding work for you.



<form id="mainForm" target="HiddenIframe" action="saveOngoingResults.php" method="post">
...
</form>

<iframe name="HiddenIframe" style="width: 100%; height: 200px; display: none;"></iframe>

And now just do


<script type="text/javascript">
function submitHidden( )
{
document.getElementById("mainForm").submit();
}
window.onload = setInterval( submitHidden, 5*60*1000 );
</script>


If you want the submittal process to somehow register on the visible web page, just have a JS function defined on the main page that does the display and then invoke it from code your PHP processing page sends back to the <iframe>, such as parent.showSubmittalResults('ok');

When the time comes to submit the form the final time, just change the target= to null and it will submit to the main window. If you need the results display to be different, set a hidden form field to so indicate to the PHP processor.

[All of the above applies equally if you are using JSP or ASP or even ASP.NET instead of PHP.]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum