Auto Save In JavaScript With window.setTimeout

Here is a quick little code sample that utilizes JavaScript to run a count down script and then submits the form.  A nice feature is that it displays the remaining time in quarter minute intervals to remind users of a pending save.  You can quickly and easily plug the javascript include file AutoSave.js into any page and simply call it.  In the HTML sample below, you'll see that all that is needed is to call the AutoSaveInit() function in the onload event of the body tag and pass the desired number of milliseconds to count before submitting the form.  This sample will submit the form in 15 seconds.
This functionality is often used to automatically save form data in a web application before a session times out on the server.  It pretty much guarantees that users won't lose data entered on the form should they walk away from their desk or are discussing output from your web app in a group meeting.  You'd be surprised at how many requests we get from user focus groups for this feature.  Since I assumed you've probably gotten the same request, I've posted this little tidbit...

AutoSave.js
  
  
  var mnAutoSaveMilliSeconds=0;
  var mnAutoSaveMilliSecondsExp=0;
  var mnAutoSaveInterval=30000;

  function AutoSaveInit(nMilliSeconds)
  {

     try
     {

       var nMinutes=0;
         
       AutoSaveClearTimeOuts();

       nMinutes = ((nMilliSeconds / 1000) / 60); 
       mnAutoSaveMilliSeconds = nMilliSeconds; 
       mnAutoSaveMilliSecondsExp=0;

       oTimeOut = window.setTimeout("AutoSaveSubmit()",nMilliSeconds);
       oInterval = window.setInterval("AutoSaveCountDown()",mnAutoSaveInterval);
       document.getElementById("divAutoSave").innerHTML = "<b>Auto Save In " + nMinutes + " Minutes</b>";
  
      }
      catch (exception) 
      { 
        if (exception.description == null) { alert("AutoSaveInit Error: " + exception.message); }  
        else {  alert("AutoSaveInit Error: " + exception.description); }
      }
  }

  function AutoSaveCountDown()
  {

    var nMinutesLeft=0;
    var nMilliSecondsLeft=0;

    mnAutoSaveMilliSecondsExp =  mnAutoSaveMilliSecondsExp + mnAutoSaveInterval;

    if ( mnAutoSaveMilliSeconds > mnAutoSaveMilliSecondsExp)
    {
      nMilliSecondsLeft = mnAutoSaveMilliSeconds - mnAutoSaveMilliSecondsExp;
      nMinutes= AutoSaveRoundNumber(((nMilliSecondsLeft / 1000) / 60),2); 
      document.getElementById("divAutoSave").innerHTML = "<b>Auto Save In " + nMinutes + " Minutes</b>";
    }

  }

  function AutoSaveBeforeSubmit()
  {
     document.getElementById("divAutoSave").innerHTML = '<b>Saving data...Please wait.</b>';
     return true;
  }


  function AutoSaveClearTimeOuts()
  {
    try
    {
      window.clearInterval(oInterval);
      window.clearTimeout(oTimeOut);
    }
    catch (exception) { }

  }

  function AutoSaveSubmit()
  {
    try
    {
      AutoSaveClearTimeOuts();
      AutoSaveBeforeSubmit();
 
      /*
         Call the form submittal code in your main page.
      */
      SubmitFormToBeSaved();
    
     }
    catch (exception) {}
  }

   function AutoSaveRoundNumber(number,X)
  {
   
    var number2;
    var TmpNum;

     X=(!X ? 1:X);
 
     number2 = Math.round(number*Math.pow(10,X))/Math.pow(10,X);
     TmpNum = "" + number2;
     var TmpArray = TmpNum.split(".");
     if (TmpArray.length <2) { number2 = number2 + ".0"; }
  
     return number2;
  }
HTML Sample Code
  
<HTML>
<HEAD>
<script language=JavaScript src=autosave.js></script>
<script language=JavaScript>
        function  SubmitFormToBeSaved()
        {
              alert('submitting form');
              document.frmSubmit.submit();
         }
    </script>
</HEAD>

<BODY onload="AutoSaveInit(15000);">
<form name=frmSubmit id=frmSubmit method=post action=mypage.htm>
<div id=divAutoSave name=divAutoSave> </div>
<input type=text value='blah' name=txtRobbe>
</form>
</BODY>
</HTML>

No comments:

Post a Comment

Subscribe to: Posts (Atom)

Flipkart