Google Answers Logo
View Question
Q: JavaScript: Form: Time from first answer to submit ( Answered 5 out of 5 stars,   0 Comments )
Subject: JavaScript: Form: Time from first answer to submit
Category: Computers > Internet
Asked by: cclegg06-ga
List Price: $10.00
Posted: 30 Mar 2003 10:39 PST
Expires: 29 Apr 2003 11:39 PDT
Question ID: 183251
I would like to initiate a timer that times how long it takes a person
to fill out a from.  The time should start from the time they answer
the first question (radio button) until the time they hit submit.  I
would then like to send the resulting time as a hidden variable to the
form database.

The script should be called from an external file.  Please provide
both a simple JavaScript external file script and html code.
Subject: Re: JavaScript: Form: Time from first answer to submit
Answered By: theta-ga on 30 Mar 2003 20:41 PST
Rated:5 out of 5 stars
Hi cclegg06-ga,
   This was a very interesting question, in terms of the difficulty in
deciding when the user starts filling up your form. Even if the first
item on your form is a radio button, the user may not start filling
your form with it. He/She may start by filling up the other form
elements and then come back to the radio button, or they may leave the
radio button at its default value, and never come back to it at all!
Clearly, the only way to accurately determine whether the user has
started filling up the form or not is to check all the form elements
and then start the timer when the user modifies the first one.
The javascript code is divided into three functions, StartTimer(),
StopTimer() and ResetTimer().The StartTimer() function starts the
timer if it has not already been started. If the timer has already
been started, it does nothing. The StopTimer() function stops the
timer, and stores the time taken(in seconds) in the Hidden element of
the user form. It then disables the timer. The ResetTimer() function
just disables the timer, without storing its value in the hidden
element of the form.

Now, we must determine which form event to call the Starttimer()
function in. We have three choices: onFocus(), onClick() or
onChange(). From these, I have used onFocus() in my sample page, i.e.
I start the timer when any form element gains the focus. My reason for
using onFocus() was simple, it is supported by (nearly) all of the
form elements, while onChange() and onClick() are only supported by a
small subset of the form elements. You can of course, use any of these
events you determine as per your needs. In fact, you can even use
multiple events for each form element. All it would require is adding
the call to the StartTimer() function to that events handler. All the
elements of your form call the StartTimer() function, except the Reset
element and the Submit element. The Reset element will call the
ResetTimer() function, and the Submit element will call the
StopTimer() function.

Another interesting anomaly I came across while selecting the event
handler is the password form element. According to Netscape's
Javascript reference, the password form element supports the onFocus
and the onChange event handlers. However, I was unable to get my
Internet Explorer 6 [SP1] to execute any code in these event handlers
for the password element. This may be a bug in IE. You may have better
luck. What this means is, if the user starts filling your form by
clicking on the password element, the timer will NOT be started until
the user moves off to some other form element. Depending on your form
design and your desire for timer accuracy, this may not even be a
problem for you.

You can get the example HTML and JS files for the following locations:
 [Example HTML]
 [Example JS]

In the example HTML page, click on any form element to start the
timer, and click on the Reset or Submit button to stop it. If you
click the submit button, it shows the time taken in seconds.

Before you start using this code in your page, you will have to make
some changes :
 - In you HTML file, for your Form elements, you must add the
appropriate calls to the three timer functions in the javascript
files. For more information on this, read the above explaination, and
check the example HTML file.
 - In the javascript file, wherever the code makes a reference to the
hidden element of the form[named myhiddenfield and myform
respectively], you must substitute the name of your form and your
hidden field name. Read the comments in the javascript file for more
 - To help you test your pages, I have left a few message box calls in
the javascript. Once you have tested your pages, you can remove these
calls. These calls have been marked in the code with the comment

For your convenience, I give the source code for the HTML page and the
javascript below:

*************** BEGIN HTML *****************
   <script language="javascript" src="Time.js"></script>
<body >
   <FORM NAME="myForm" >
      Button        <INPUT TYPE="BUTTON" VALUE="Button"
onfocus="StartTimer();" >
      CheckBox      <INPUT TYPE="CheckBox"  onfocus="StartTimer();">
      File          <INPUT TYPE="FILE"  onfocus="StartTimer();" >
      Hidden        <INPUT TYPE="HIDDEN" name="myhiddenfield"
VALUE="0" >
      Password      <INPUT TYPE="PASSWORD" NAME="myPass
onfocus="FormClicked();" onchange="StartTimer();" >
      Radio         <INPUT TYPE="RADIO" NAME="myRadio" value="Radio"
onfocus="StartTimer();" >
      Text          <INPUT TYPE="TEXT" NAME="myText" 
onfocus="StartTimer();" >
      Textarea      <TEXTAREA NAME="myTextarea" 
onfocus="StartTimer();" ></TEXTAREA>
      Select object <SELECT NAME="mySelect"  onfocus="StartTimer();"

      Reset object  <INPUT TYPE="RESET"  onfocus="ResetTimer();" >
      Submit object <INPUT TYPE="SUBMIT"  onclick="StopTimer();" >
*************** END HTML *******************

************* BEGIN Time.js ****************

var timerStarted=false;
var startTime=0, stopTime=0, timeTaken=0;

function StartTimer()
  if( !timerStarted)
     startTime = new Date();
     startTime=startTime.getTime();// get time in milliseconds
     timerStarted = true; //Timer Enabled
     alert("Started Timer"); // REMOVE THIS

function StopTimer()
  if( startTime ==0 )
     // Change myForm to your Form name
     // Change myhiddenfield to your hiddenfield name
     alert("Time Taken == 0"); //REMOVE THIS
     stopTime = new Date();
     timeTaken = (stopTime - startTime)/(1000);

     // Change myform to Your Form name
     // Change myhiddenfield to your hiddenfield name
     window.document.myForm.myhiddenfield.value= timeTaken;

     alert("Time Taken: "+window.document.myForm.myhiddenfield.value);
   //Reset the Timer


function ResetTimer()
  //Reset Timer Info
  timerStarted=false; // Disable Timer

  alert("Timer Disabled"); //REMOVE THIS

*************** END Time.js *******************

Hope this helps.
If you need any clarifications, just ask!


Request for Answer Clarification by cclegg06-ga on 01 Apr 2003 16:57 PST
Thank you for your response.  It makes perfect sense.  I came across
one problem…

I’m using an “onClick” function already to prevent double form

See code below:

var formSubmitted=false;             // Initialize our submit flag to
function submitForm() 
  if( formSubmitted == true ) {     //has the form been submitted
    alert("We are processing your answers.\nThank you.") 
    return false; 
  formSubmitted = true;             // Set the formSubmitted flag 
return true;                            // Submit form  


It seems that I can’t have two “onClick”s in the same line for only
the one to appear first works.  Is there anyway to make the two

(On a side note: I’ve decided to calling the “onfocus=”ResetTimer();””
because I’m not using a reset button.)

Request for Answer Clarification by cclegg06-ga on 01 Apr 2003 17:09 PST
Scratch that…

I just realized that, because the function resets the timer after
clicking submit, any subsequent submits (which the other function was
designed to prevent) will have an associated time of 0 (the default
value of the hidden variable).  This makes it easy to delete these on
the back side.

Problem solved.

Thank you very much for your help.  No further response is required.


Clarification of Answer by theta-ga on 01 Apr 2003 23:01 PST
Hi cclegg06-ga,
   Glad to have been of help!  :-)
   And since you were wondering, you can call multiple function from
an event handler like this :
      <... onClick="function1(); function2();">

   Hope this helped.

cclegg06-ga rated this answer:5 out of 5 stars and gave an additional tip of: $5.00
Fantastic answer.  Clear and well thought out.  Thank you again!

There are no comments at this time.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy