HTML / JS / Time spent in a tab

Question

I have a very specific problem. I browsed the whole internet for a solution, but I didn't find anything useful.

I have this HTML code:

    <form action="/timer.php" method="POST">
      <span>First Name:</span><input name="firstname" type="text" />
      <input type="submit" value="Submit">
    </form>

When I enter the timer.php site by entering my name, the new tab should count the time spent on this page, and save it anywhere (file or a database) with my entered name and autosave every half an hour.

Current html

<html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

function call_ajax(pageOpen, firstname){
pageClose =new Date(); 

//count spent minutes and seconds on page
minutes= pageClose.getMinutes() - pageOpen.getMinutes(); 
seconds= pageClose.getSeconds() - pageOpen.getSeconds(); 

//send the spent minutes, seconds and firstname to timer.php file
$.ajax({ 
url: "timer.php",
data: {'minutes': Math.abs(minutes), 'seconds':Math.abs(seconds), 'firstname':firstname}
})

}

$(document).ready(function() {
//When open the page get the current time
var pageOpen = new Date();

//call the ajax to send the request in timer.php every 30 min
setInterval(function(){var firstname = $('#firstname').val();call_ajax(pageOpen, firstname); }, 1000 * 60 * 30);

$("button").click(function(e){
e.preventDefault();
//call the ajax to send the request in timer.php on click the button
var name = $('#firstname').val();
call_ajax(pageOpen, name);
});
});

</script
</head>
<body>
<form action="/timer.php" method="POST" name="timer" >
 <span>First Name:</span><input name="firstname" type="text" id="firstname" />

<input type="submit" value="Submit">
</form>




</body>
</html>

My timer.php:

<?php
header('Content-Type: text/html; charset=Windows-1250');
$firstName = $_POST['firstname'];
$minutes = $_POST['minutes'];
$seconds = $_POST['seconds'];
?>


<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Windows-1250" />

</head>
<body>



<
Meno Užívateľa:   <b>  <?= $firstName ?>    </b>
</br>
</br>

Momentálne majníš :   <b> <?= $minutes ?>  Minút  </b>    <b>   a   </b>   <b>   <?= $seconds ?>  Sekúnd   </b>
 </br>
</br>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">



</body>
</html>

Shivendra Singh · Accepted Answer · 2019-05-12T09:00:38.417

1

use the ajax to count spent time on page. for Autosave call the method setInterval.

here is complete code.

idex.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

function call_ajax(pageOpen, firstname){
pageClose =new Date(); 

//count spent minutes and seconds on page
minutes= pageClose.getMinutes() - pageOpen.getMinutes(); 
seconds= pageClose.getSeconds() - pageOpen.getSeconds(); 

//send the spent minutes, seconds and firstname to timer.php file
$.ajax({ 
        url: "timer.php",
        type: "POST",
         data: {'minutes': Math.abs(minutes), 'seconds':Math.abs(seconds), 'firstname':firstname},
         success: function(result){
         $('#result').html(result);
         }
      })

}


$(document).ready(function() {
  //When open the page get the current time
  var pageOpen = new Date();

  //call the ajax to send the request in timer.php every 30 min
  setInterval(function(){var firstname = $('#firstname').val();call_ajax(pageOpen, firstname); }, 1000 * 60 * 30);


  $("button").click(function(e){
  e.preventDefault();
  //call the ajax to send the request in timer.php on click the button
      var name = $('#firstname').val();
      call_ajax(pageOpen, name);

   });
});




</script>
</head>
<body>

<!-- Form --->
<form name="timer" method="POST">
<span>First Name:</span><input name="firstname" type="text" id="firstname" />
<button>Submit</button>
</form>

<div id="result"></div>

</body>
</html>

Get the ajax request in timer.php file. and save in database or file.

timer.php

<?php
header('Content-Type: text/html; charset=Windows-1250');
$firstName = $_POST['firstname'];
$minutes = $_POST['minutes'];
$seconds = $_POST['seconds'];
?>
Meno Užívateľa:   <b>  <?= $firstName ?>    </b>
</br>
</br>
Momentálne majníš :   <b> <?= $minutes ?>  Minút  </b>    <b>   a   </b>   <b>   <?= $seconds ?>  Sekúnd   </b>
 </br>
</br>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">

edited May 12 '19 at 09:00

answered May 11 '19 at 21:44

Shivendra Singh

2,986
1
11
11

I dont know if ido something wrong, but it doesnt work for me: Here is my code of form idex.html:
First Name: And here is my timer php: header('Content-Type: text/html; charset=Windows-1250'); $firstName = $_POST['firstname']; $minutes = $_POST['minutes']; $seconds = $_POST['seconds']; ?> Čas: = $minutes ?> Minút a = $seconds ?> Sekúnd
– Hnusny Pleb May 12 '19 at 07:24
In idex.html, put the complete code whatever i update. – Shivendra Singh May 12 '19 at 07:32
I'm using ajax for autosave every half an hour. – Shivendra Singh May 12 '19 at 07:38
I added... Im editing th post cuz icant paste it here – Hnusny Pleb May 12 '19 at 07:38
Ok. Edit the post. – Shivendra Singh May 12 '19 at 07:40
I'm using the ajax because of auto update after every 30 min so in your form no need to use action now. I attached the output screen please have a look. – Shivendra Singh May 12 '19 at 08:00
@Hnusny I edited the post. added the code for idex.html and timer.php. Please have a look. – Shivendra Singh May 12 '19 at 09:02
Thanks you... Now its working .... And how i could save the time to database ? . Its possible to do it like: If i close a tab with example 20 seconds, and open with same name, it will go from 20 seconds ? Thanks – Hnusny Pleb May 12 '19 at 10:53
in timer.php, you can use the database driver like mysql, PDO to save the time and first name when you are getting this value. when you open with the same name, get the store time from database. – Shivendra Singh May 13 '19 at 07:39

HTML / JS / Time spent in a tab

1 Answers1