timer.jquery | jQuery Timer: Start/Stop/Resume/Remove pretty timer inside any HTML element | Frontend Framework library

Here is my proposal. It's indeed based on performing an ajax request. A form is, of course, not needed in this case. As already commented, by submitting a form, all informations related to the timer in the current page would be lost, because the submit would refresh the whole page where the timer resides, or would even redirect to another page - if so demanded.

You can run my code as it is, but you need to change the db connection credentials and the db table related infos in the INSERT sql statement.

The timer resides in index.php. The server-side saving operation is performed in saveTime.php - I used the PDO extension for it. The database connection is created in connection.php.

On the client-side, the saving operation - saveTime() - is started by clicking the .save-timer-btn button, or the .pause-timer-btn button. But you can call saveTime() on the events of your choice.

If the posted timer value is not defined, the PHP code sends a response header, which triggers the error function of the ajax request. The error function will then display a bootstrap alert of type danger. The same applies if the passed timer state is not recognised by PHP. If the saving operation succeeds, a success alert will be displayed.

Note: My codes don't rely on your codes, but they are just slightly different. This is because I used the last version (0.7.1) of the timer and the code used in the demo from jquerytimer.com. I suggest you to pay attention to each code line. Sorry :-) I also used the version 3.3.7 of Bootstrap.

Note: For proper error reporting/handling you could read this and this articles, since I didn't implement it in my PHP code.