Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts

    auto submit form using ajax every 5 minutes without reloading page

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

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,835
    Thanks
    21
    Thanked 157 Times in 148 Posts
    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:

    Code:
    <!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>
    Last edited by chump2877; 01-03-2012 at 09:38 PM. Reason: changed setTimeout to setInterval...oopsie!
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.

    Code:
    <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
    Code:
    <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.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •