Javascript Stopwatch to MySQL Database

So what I need to do is have a start time and an end time on the html page that I am creating. It is so that the technician can start the clock once he begins work, and when he ends that day he hits stop and the total time elapsed is calculated. Now I have fou开发者_如何转开发nd a bunch of code that will do this, but I need to go one step further. I need to get the time elapsed and POST it through my PHP file so that it gets saved in a table that was created in our MySQL database.

<script type="text/javascript">
var duration = 0;

// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
        this.this_current_time = this_current_time;
        this.this_start_time = this_start_time;
        this.this_end_time = this_end_time;
        this.this_time_difference = this_time_difference;
        this.GetCurrentTime = GetCurrentTime;
        this.StartTiming = StartTiming;
        this.EndTiming = EndTiming;
    }

    //Get current time from date timestamp
    function GetCurrentTime() {
    var my_current_timestamp;
        my_current_timestamp = new Date();              //stamp current date & time
        return my_current_timestamp.getTime();
        }

    //Stamp current time as start time and reset display textbox
    function StartTiming() {
        this.this_start_time = GetCurrentTime();        //stamp current time
        document.TimeDisplayForm.TimeDisplayBox.value = 0;      //init textbox display to zero
        }

    //Stamp current time as stop time, compute elapsed time difference and display in textbox
    function EndTiming() {
        this.this_end_time = GetCurrentTime();          //stamp current time
        this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
        document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;      //set elapsed time in display box
        }

var time_object = new timestamp_class(0, 0, 0, 0);  //create new time object and initialize it

//-->

function assignDuration()
{
   document.stopform.duration.value = duration;
}
</script>

    <form>
        <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
    </form>
    <form>
        <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
    </form>

<form name="stopform" action="process-form.php" method="POST">
   <input type="hidden" name="duration" value="0"/>
   <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/>
</form>

Thanks ahead of time!

---

As long as you're relying on JavaScript being enabled, you could create a hidden form element and assign the calculated duration to it when the user clicks "Stop". This itself should be a submit button.

So your Javascript will be something like this:

<script type="text/javascript">
var duration = 0;
...YOUR TIME CALCULATION CODE...

function assignDuration()
{
   document.stopform.duration.value = duration;
}

</script>

And your HTML will also have:

<form name="stopform" action="process-stop.php" method="POST">
   <input type="hidden" name="duration" value="0"/>
   <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/>
</form>

You will also need a PHP file which processes the duration value:

$duration = $_POST['duration'];
mysql_query('INSERT INTO MyTable (duration, technician) VALUES ('.$duration.', '.$technicianId.')');

The above code assumes you already have a means of identifying the user.

For the record I agree with the previous comment about recording a start time and end time on the server and then calculating the duration there. The problem with doing it on the client side - as has been said - is that the user is capable of altering the data either by manipulating th JavaScript code, or even just their systems time and date. Also if JavaScript isn't enabled then none of the timer functionality would work at all.

If you're positive that JavaScript will always be enabled and that the User will not manipulate it then the solution as above (or something very like it) should work.

P.S. You may need to double check the syntax for JavaScript and PHP as I just typed it off the top of my head and haven't seen it in a code editor.