?
Solved

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

Posted on 2016-09-09
7
Medium Priority
?
58 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
7 Comments
 
LVL 44

Accepted Solution

by:
zephyr_hex (Megan) earned 1000 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 58

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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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 44

Expert Comment

by:zephyr_hex (Megan)
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

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

764 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