• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 63
  • Last Modified:

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

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
Victor Nares
Asked:
Victor Nares
  • 2
  • 2
  • 2
2 Solutions
 
zephyr_hex (Megan)DeveloperCommented:
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
 
Julian HansenCommented:
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
 
Victor Naresdb DeveloperAuthor Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
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
 
Victor Naresdb DeveloperAuthor Commented:
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
 
zephyr_hex (Megan)DeveloperCommented:
@Victor - if your question has been answered, you can close it out and identify the solutions that answered your question.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now