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

01-03-2012, 12:04 PM
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???

01-03-2012, 02: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"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<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)
else if (window.ActiveXObject)
// if IE
httprequest = new ActiveXObject("Msxml2.XMLHTTP");
catch (e)
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");

<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>

<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);


Old Pedant
01-03-2012, 08: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">

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

And now just do

<script type="text/javascript">
function submitHidden( )
window.onload = setInterval( submitHidden, 5*60*1000 );

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.]