Solved

Capture sytem time when a user clicks on a button on a webform.

Posted on 2016-09-09
7
29 Views
Last Modified: 2016-10-03
thank you all in advance for your help. We have a webform that currently sends data to our MySQL server in the cloud. The webform uses PHP to make the connection. We would like the user to click a button at the top of the form as they start submitting data and then hit another button at the end of the form when they are done.

If the form can capture the start time and the end time, we can have sql do the math and give us a calculated elapsed time.

Thus, how can we have the system time sent to the MySQL db via a form button.

thank you again in advance!
0
Comment
Question by:Victor Nares
  • 2
  • 2
  • 2
7 Comments
 
LVL 42

Accepted Solution

by:
zephyr_hex earned 250 total points (awarded by participants)
ID: 41792011
It might be better to send the start and end times with the form submission, so you have all of the data at the same time.

To do this, add two hidden fields to your form.  One field will be set with the start time and the other with the end time.  You can tie click events to those buttons, which, when triggered, will capture the time and update the corresponding hidden input.  The values can then be retrieved from the hidden inputs when the form is posted.

Here is a simple example:  Fiddle Demo

And the code from that demo:

HTML
<input type="hidden" id="start" name="start" value="">
<input type="hidden" id="end" name="end" value="">
<input type="button" id="myButton" value="Start">
<span id="result"></span>

Open in new window


jQuery
$('#myButton').click(function() {
  var d = new Date();
  var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
  if ($(this).val() === "Start") {
    $('#start').val(time);
    $(this).val("End");
  } else if ($(this).val() === "End") {
    $('#end').val(time);
    $(this).val("Done");
    $('#result').text("Start time: " + $('#start').val() + " and End time: " + $('#end').val());
  }
});

Open in new window

1
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41792557
Why rely on a user clicking a button?
Why not record the time when they hit the form page and the time when you get a submit? That way you keep it on the server outside of the user's ability to interfere with the results?
0
 

Author Comment

by:Victor Nares
ID: 41794889
Julian,

that would work great as well. However on this form, I'd like the user to "time" themselves. the webform is being filled as an operator completes the tasks. We want to capture how long the operator took to complete the tasks.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points (awarded by participants)
ID: 41795055
I understand - we use this on our telephonic surveys to monitor performance of the operators. They dial a number, start the survey, ask the questions.
We are able to time every stage of the process and bring up profiles by operator down to the question level.
Not sure what the benefit is of them actually hitting a button?
What if they start filling out the form and forget to hit the button? You would need to lock the form until they pressed the button which could simply trigger a process on the server that captures the time this could be as simple as
$.get('timer.php');

Open in new window

When the form is submitted that is the end of the time.
However, I still think that it makes more sense to capture the time when the form is requested - or to do both.

Having said that here is a sample
HTML (php file)
<?php
session_start();
$_SESSION['start'] = time();
?>
    <button class="btn btn-success" id="start">Start</button> Time: <span id="timer"></span>
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <form action="t1580_complete.php" method="post" class="form-horizontal">
          <div class="form-group">
            <label for="firstname" class="control-label col-sm-3">First name</label>
            <div class="col-sm-9">
              <input type="text" name="firstname" id="firstname" class="form-control" disabled/>
            </div>
          </div>
          <div class="form-group">
            <label for="surname" class="control-label col-sm-3">Last name</label>
            <div class="col-sm-9">
              <input type="text" name="surname" id="surname" class="form-control" disabled />
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="control-label col-sm-3">Email</label>
            <div class="col-sm-9">
              <input type="email" name="email" id="email" class="form-control" disabled />
            </div>
          </div>
          <div class="form-group text-right">
            <div class="col-sm-12">
              <button class="btn btn-default" disabled>Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>

Open in new window

jQuery for main file
$(function() {
   $('#start').click(function() {
       $.get('t1580_timer.php');
       $('input, button').prop('disabled', false);
     var start = (new Date()).getTime() / 1000;
     setInterval(function() {
     var now = (new Date()).getTime() / 1000;
     $('#timer').html(parseInt(now-start));
     }, 1000);
   });
});

Open in new window

PHP Start Timer script
<?php
session_start();
$_SESSION['timerstart'] = time();

Open in new window

PHP Post script
<?php
session_start();
$complete = time();

echo "Total time: " . ($complete - $_SESSION['start']) . " seconds<br/>";
echo "Operator time: "  . ($complete - $_SESSION['timerstart']) . " seconds<br/>";
$_SESSION = array();
session_destroy();

Open in new window

Working sample here
0
 

Author Comment

by:Victor Nares
ID: 41798186
zephyr_hex your code and example were very helpful and worked great!

Julian, you php code worked great as well! we have applications where that will work for sure.

thank you both. the information was key!
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41798875
@Victor - if your question has been answered, you can close it out and identify the solutions that answered your question.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now