How to calculate difference in hours in PHP and JavaScript?

Question

As you can see in the code below, I have two fields for the time;

Btime
Etime

The btime is a field the user enters the time they leave the office, the etime is the time they return.

I currently have a total field where the employee manually enters the difference.

For instance, if the btime is 14:00 and the etime is 16:00 they will manually enter 2 in the total field representing 2 hours (the difference between 14:00 and 16:00).

Is there a way for me to edit the code below so when they choose 14:00 from the btime drop down menu and 16:00 from the etime drop down menu the difference will automatically populated into the total field?

In this example a 2 would auto populate in the total field.

MAIN PAGE

<html
<head>
<title>Non-Traditional Work Hours</title>
</head>
</html>
<body style="background-image:url(FadedBG.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center;">
<b> ***Enter your work information below if your office is 1*** </b>

<script type="text/javascript">
function doValidation(){


    if(document.forms[0].weekend.value==""){
    alert("You forgot to choose if this was a weekend or not!");
    document.forms[0].weekend.focus();
    return false;
  }


    if(document.forms[0].officer.value==""){
    alert("You forgot to choose your name!");
    document.forms[0].officer.focus();
    return false;
  }


    if(document.forms[0].datepicker.value==""){
    alert("You forgot to choose a date that you worked!");
    document.forms[0].datepicker.focus();
    return false;
  }

    if(document.forms[0].etime.value==""){
    alert("You forgot to choose an ending time!");
    document.forms[0].etime.focus();
    return false;
  }

     if(document.forms[0].btime.value==""){
    alert("You forgot to choose a begining time!");
    document.forms[0].btime.focus();
    return false;
  }

     if(document.forms[0].total.value==""){
    alert("You forgot to enter a total!");
    document.forms[0].total.focus();
    return false;
  }

 return true;
}
</script>


<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
date_default_timezone_set('America/New_York');



if( isset($_POST) && !empty($_POST) )
{
     $host  = "blabla";
     $user  = "blabla";
     $pw    = "blabla";
     $db    = "nthours";

     $conn = mysql_connect( $host, $user, $pw )
     or die( "Error! Unable to connect to database server: <br/>" . mysql_error() );

     $rs = mysql_select_db( $db, $conn )
     or die( "Error! Unable to connect to database:  <br/>" . mysql_error() );

    foreach($_POST as $key=>$value)
    {
        ${$key}=mysql_real_escape_string($value);
    }

     $strSQL = "INSERT INTO work
        (officer, weekend, datepicker, notes, btime, etime, total, office)
        VALUES
        ( '" . $officer . "' , '".$weekend."' , '".$datepicker."' , '".$notes."' , '".$btime."' , '".$etime."' , '".$total."' , '".$office."' )";

     if (!mysql_query( $strSQL, $conn )){
        echo( "Unable to save data to database: <br/>" . mysql_error() . "<br/>" . $strSQL . "</span><br/>" );
     }
     else{
        header( "Location: http://tnep-g-train/nthours/home.php" );
        exit;







     }
}
?>

<html>

<head>
<title> PODDS </title>

<script type="text/javascript">
function doValidation(){


    if(document.forms[0].officer.value==""){
    alert("Choose your name!");
    document.forms[0].officer.focus();
    return false;
  }

Data System

 return true;
}
</script>

</head>
</html>
<body>
<body style="background-image:url(FadedBG.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center;">
<form method="post" action="1.php" onsubmit="return confirmation(this)">

<br>

</select>
</span>

<b>Choose Your Name:</b> <br /> 
<select name="officer">
<option value=""></option>
<option value="John Doe">John Doe</option>
<option value="Jane Doe">John Doe</option>

</select>





<input type="hidden" name="office" size="10" value="1"/>




<br>
<br>
<b>Weekend?</b> <br /> 
<select name="weekend">
<option value=""></option>
<option value="NO">NO</option>
<option value="YES">YES</option>
</select>

<br>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
</head>
<body>

<p><b>Date Worked:</b> <br> <input type="date" name="datepicker" id="datepicker" size="15" />
<br>
<br>
<b>Start Time</b> <br /> 
<select name="btime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option value="06:00:00">6:00am</option>
<option value="06:30:00">6:30am</option>
<option value="07:00:00">7:00am</option>
<option value="07:30:00">7:30am</option>
<option value="08:00:00">8:00am</option>
<option value="08:30:00">8:30am</option>
<option value="09:00:00">9:00am</option>
<option value="09:30:00">9:30am</option>
<option value="10:00:00">10:00am</option>
<option value="10:30:00">10:30am</option>
<option value="11:00:00">11:00am</option>
<option value="11:30:00">11:30am</option>
<option value="12:00:00">12:00pm</option>
<option value="12:30:00">12:30pm</option>
<option value="13:00:00">1:00pm</option>
<option value="13:30:00">1:30pm</option>
<option value="14:00:00">2:00pm</option>
<option value="14:30:00">2:30pm</option>
<option value="15:00:00">3:00pm</option>
<option value="15:30:00">3:30pm</option>
<option value="16:00:00">4:00pm</option>
<option value="16:30:00">4:30pm</option>
</select>



<br>

<b>End Time</b> <br /> 
<select name="etime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option value="06:00:00">6:00am</option>
<option value="06:30:00">6:30am</option>
<option value="07:00:00">7:00am</option>
<option value="07:30:00">7:30am</option>
<option value="08:00:00">8:00am</option>
<option value="08:30:00">8:30am</option>
<option value="09:00:00">9:00am</option>
<option value="09:30:00">9:30am</option>
<option value="10:00:00">10:00am</option>
<option value="10:30:00">10:30am</option>
<option value="11:00:00">11:00am</option>
<option value="11:30:00">11:30am</option>
<option value="12:00:00">12:00pm</option>
<option value="12:30:00">12:30pm</option>
<option value="13:00:00">1:00pm</option>
<option value="13:30:00">1:30pm</option>
<option value="14:00:00">2:00pm</option>
<option value="14:30:00">2:30pm</option>
<option value="15:00:00">3:00pm</option>
<option value="15:30:00">3:30pm</option>
<option value="16:00:00">4:00pm</option>
<option value="16:30:00">4:30pm</option>
</select>

<br>
<br>

<b>Total: <i>(Enter Numbers Only; For Example, 2 Hours & 30 Minutes should be entered as 2.5)</i>
</b> <br />
<input type="text" value="" name="total" size="5"  />


<br>
<br>


<b>Notes:</b> <br />
<input type="text" value="" name="notes" size="100" />

</p>
</body>
</html>


<input type="submit" value="SUBMIT" onClick="return doValidation()"/>

<?php echo '</form>';?>

</form>
</body>
</html>

[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Jan 29 '16 at 18:57
Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Jan 29 '16 at 18:57
Have you tried to do the calculation? If so, can you show us that code and tell us why it didn't work? It will be a JavaScript function which will do the calculating. — Jay Blanchard, Jan 29 '16 at 19:00

score 1 · Answer 1 · edited May 23 '17 at 10:28

There are several caveats here but here is a raw example:

First a function has to be created which will convert your values to raw seconds:

function convertTimestamp(ts) {
    var a = ts.split(':'); // split your value at the colons
    var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); // calculate each pair
    return seconds;
}

Second, use the function along with the gathered values to do the final calculation:

$(document).on('change', '[name="etime"]', function(){
    var begin = convertTimestamp($('[name="btime"]').val());
    var end = convertTimestamp($('[name="etime"]').val());
    var totalSeconds = end - begin; 
    var totalHours = (totalSeconds/60) / 60; // convert back to hours
    $('#result').html('Total Hours: ' + totalHours);

});

The caveats are this:

A calculation is limited. You might get folks who select in the wrong order, causing negative numbers.
The calculation in this case is only triggered when the end time is changed. You will have to add more code to make the calculation happen if either is changed OR you will have to insure that users make the changes in order.
The whole thing assumes that no worker crosses midnight so the code is only applicable if the day starts and ends after 00:00:00

I know that the answer is only concerned with the JavaScript, but I wanted to make sure that you understand your script is at risk for SQL Injection Attacks.

Additionally you should stop using mysql_* functions. These extensions have been removed in PHP 7. Learn about prepared statements for PDO and MySQLi and consider using PDO, it's really pretty easy.

MistaJase · Answer 2 · 2016-01-29T19:39:56.803

0

Php does have a datetime diff function:

$val1 = '2014-03-18 10:34';
$val2 = '2014-03-18 10:54';

$datetime1 = new DateTime($val1);
$datetime2 = new DateTime($val2);

$difference = $datetime1->diff($datetime2);
echo $difference->format("%H:%I");

I think you could use something like this in js, you'll have modify it to suit your input:

var btime = $('#btime').val();
var etime = $('#etime').val();
var diff = new Date("1979-01-01 "+btime) - new Date("1970-01-01 "+etime);
diff_time = diff/(60*60*1000);  
alert('diff ='+diff_time);

edited Jan 29 '16 at 19:39

answered Jan 29 '16 at 19:10

MistaJase

839
7
12

Look at the values the OP is using for start and end times. And `DateTime()` is not a JS function – Jay Blanchard Jan 29 '16 at 19:12
wouldn't this require a refresh or something like that (ajax perhaps)? – davejal Jan 29 '16 at 19:14
I've updated my answer - think I may of found your answer – MistaJase Jan 29 '16 at 19:40

How to calculate difference in hours in PHP and JavaScript?

2 Answers2