SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tracking how long it takes user to click a button

    Hi,
    I need help with setting up a timer for my webpage - specifically, I have a page which closes 5 minutes after it's opened (using settimout), but within that time, I want to know how long it takes for the user to click on a particular button - either the time from when the page first loads until the button is clicked, or the time from when the button is clicked until the 5 minutes elapse. I need this to be saved as a variable when the page closes.
    Any suggestions are appreciated.

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came up with the following, but it's not working - if you have any suggestions, please let me know.

    <FORM name = "autoform" METHOD = "post">

    <script type="text/javascript">

    var starttime = new Date();

    function submitForm()
    {
    document.getElementById('autoform').submit();
    }

    setTimeout('submitForm();', 10000);
    function tracktime()
    {
    var clicktime = new Date();
    var tottime = clicktime - starttime;
    document.autoform.<ml.varname>_01.value = tottime;
    }
    </script>

    <button TYPE="button" onlcick = "tracktime()"> click this button </button>

    <input type="hidden" name="<ml.varname>_01" value= "" >

    </form>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    This part of the code looks suspect:

    Code javascript:
    document.autoform.<ml.varname>_01.value = tottime;

    You really should use array-notation instead for named attributes with special characters

    Code javascript:
    document.autoform['<ml.varname>_01'].value = tottime;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a way to do it, but you will need to fill in the missing details regarding sending the form. This script illustrates the principle by writing the elapsed time to the page after button click. The timeout at the end is only 5 seconds long, so you can see what happens if nobody clicks the button.

    The total time is stored in the hidden form variable.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Timing User Input</title>
    <script type="text/javascript">
    <!--
    // begin timing after page loads.
    var startTime, tOut=null;         // global
    function init()
     { startTime = new Date();  
      // finish set for 5 secs here for testing
       tOut=setTimeout("submitForm()",5000);
     }
    // ----------
    function trackTime()
    { // clear timeout
      clearTimeout(tOut);
     // register time of onclick event 
      var clickTime = new Date();
      var totTime = clickTime - startTime;
     // save total time in hidden variable in form 
      document.autoform.varName_01.value = totTime;
     // write total time to page 
      document.getElementById("output").innerHTML=totTime;
     // send form 
       submitForm()
    }
    // ----------
     function submitForm()
      { // clear timeout
          clearTimeout(tOut);
          alert("finished");  // temporary alert for testing  
        // form needs an action and method attributes to work, so not active below this line  
        // document.getElementById("autoform").submit(); 
      }
    //-->
    </script>
    </head>
     
    <body onload="init()">
     
    <form name="autoform">
      <p><button TYPE="button" onclick="trackTime()">click this button</button>
      <input type="hidden" name="varName_01" value="0"></p>
    </form>
    <p>Elapsed time(mSec)= <span id="output">0</span></p>
    <!-- end form -->
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

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