Solved

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

Posted on 2016-09-09
7
53 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 43

Accepted Solution

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

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
Technology Partners: 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!

 
LVL 57

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 43

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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)

726 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