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] www31.brinkster.com/tanm/GA/Time.htm
[Example JS] www31.brinkster.com/tanm/GA/Time.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
info.
- 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
'//REMOVE THIS'
For your convenience, I give the source code for the HTML page and the
javascript below:
*************** BEGIN HTML *****************
<html>
<head>
<script language="javascript" src="Time.js"></script>
</head>
<body >
<FORM NAME="myForm" >
<PRE>
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();"
><OPTION>1<OPTION>2<OPTION>3</SELECT>
Reset object <INPUT TYPE="RESET" onfocus="ResetTimer();" >
Submit object <INPUT TYPE="SUBMIT" onclick="StopTimer();" >
</PRE>
</FORM>
</body>
</html>
*************** 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
window.document.myForm.myhiddenfield.value=0;
alert("Time Taken == 0"); //REMOVE THIS
}
else
{
stopTime = new Date();
stopTime=stopTime.getTime();
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);
//REMOVE THIS
}
//Reset the Timer
ResetTimer();
}
function ResetTimer()
{
//Reset Timer Info
startTime=0;
timerStarted=false; // Disable Timer
alert("Timer Disabled"); //REMOVE THIS
}
*************** END Time.js *******************
Hope this helps.
If you need any clarifications, just ask!
Regards,
Theta-ga
:-) |
,
0 Comments
)