Add a Stopwatch to Forms

replied on December 15, 2015

It would need to be implemented using some minor javascript. Not sure what your layout/ui looks like, but I'm guessing that you have table/listing with the firefighters being tested. If that be the case, then add a column to the table and select "Single Line" for the field type. Make sure to give it a classname (i gave it a classname of "stopwatch") so you can reference it in code. Add this to your "CSS and Javascript" > "CSS" section:

td.stopwatch input {width:50%;float:left;}

Add this to your "Javascript" section (this code assumes you have 1 table on the form):

$(document).ready(function() {
  function addStopwatch() {
      $(this).find('td.stopwatch input').parent().append('<i class="fa fa-clock-o stopwatchbutton" style="font-size:25px;padding-left:10px;cursor:pointer;"></i>');
  }

  addStopwatch.call($('table.cf-table tbody tr:last').get());

  $(document).on('click','i.stopwatchbutton', function() {
     var stw = $(this).data('stopwatch');
     if (stw) {
         $(this).data('stopwatch',null);
         clearInterval(stw);
         return;
     }
     var inp = $(this).siblings('input');
     inp.val(inp.val() || '0');
     stw = setInterval(function() {
         inp.val(+inp.val() + 10);
     },10);
     $(this).data('stopwatch',stw);
  }).on('click','a.cf-table-add-row',function() {
      //console.log($(this).siblings('.cf-table').find('tbody tr:last').get());
      addStopwatch.call($(this).siblings('.cf-table').find('tbody tr:last').get());
  });
});

Here is what it should look like:

And a little demo:

Each stopwatch can run independently of one another. Works good on an iPad as well. This is just a demonstration and would need to be tailored for your needs. Let me know if you need any more help.

1 0

View 1 previous reply

replied on December 15, 2015

$(document).ready(function() {
  function addStopwatch() {
      $(this).find('td.stopwatch input').parent().append('<i class="fa fa-clock-o stopwatchbutton" style="font-size:25px;padding-left:10px;cursor:pointer;"></i>');
  }

  addStopwatch.call($('li[attr=Firefighters_Being_Tested] table.cf-table tbody tr:last').get());

  $(document).on('click','i.stopwatchbutton', function() {
     var stw = $(this).data('stopwatch');
     if (stw) {
         $(this).data('stopwatch',null);
         clearInterval(stw);
         return;
     }
     var inp = $(this).siblings('input'), i = +inp.val()*1000 || 0;
     stw = setInterval(function() {
            i=i+10;
         inp.val((i/1000).toFixed(1));
     },10);
     $(this).data('stopwatch',stw);
  }).on('click','a.cf-table-add-row',function() {
      //console.log($(this).siblings('.cf-table').find('tbody tr:last').get());
      addStopwatch.call($(this).siblings('.cf-table').find('tbody tr:last').get());
  });
});

That code will show you seconds with 1 decimal place. It is not very optimized (conversions could be better) or tested but it is quick and dirty and gets the job done.

0 0

replied on December 15, 2015

Thank you for your help. This is great!

We use a single line format and only have 1 time per form. Although I think the table would work great for other things that we do, I only need 1 stopwatch in the current form. How does that change the script?

Sorry, I am not well versed in javascript.

0 0

replied on December 15, 2015

This really depends on your form layout. If you know the specific classname of the single line field you want to add the stopwatch to, then in this script replace the [yourclassnamehere]:

$(document).ready(function() {
  function addStopwatch() {
      $(this).find('input').parent().append('<i class="fa fa-clock-o stopwatchbutton" style="font-size:25px;padding-left:10px;cursor:pointer;"></i>');
  }

  addStopwatch.call($('.[yourclassnamehere]').get());

  $(document).on('click','i.stopwatchbutton', function() {
     var stw = $(this).data('stopwatch');
     if (stw) {
         $(this).data('stopwatch',null);
         clearInterval(stw);
         return;
     }
     var inp = $(this).siblings('input'), i = +inp.val()*1000 || 0;
     stw = setInterval(function() {
       	 i=i+10;
         inp.val((i/1000).toFixed(1));
     },10);
     $(this).data('stopwatch',stw);
  });
});

0 0

Question

Question

Replies

Sign in to reply to this post.