测量两个PHP表单提交之间的时间

I am attempting to measure the period of time from when a user submits a PHP form to when they submit again. The form's action is the same page so effectively it's just a refresh. Moreover, the user may input the same data again. I need it so that it begins counting before the page refreshes as the result must be as accurate as possible. I have already tried a number of methods but none of which resulted in any success. I have simplified the following code:

HTML Form

<form method="GET" action="index.php">
<input id="motion_image" type="image" value="1" name="x" src="img/btn1.png">
<input id="motion_image" type="image" value="2" name="x" src="img/btn2.png">
</form>

Ultimately, I need to have a PHP or JavaScript variable of how long it took a user to press either one of these two buttons to when they again press either one of them. It is important that the counter begins before the refresh as the variable needs to be as accurate as possible. Furthermore, it needs to be responsive so that after say 5 seconds it triggers an event (e.g. a JavaScript alert). I did not feel it was necessary to include my previous attempts as they were all unsuccessful and I believe there is probably a better way. I have full access to the server the site is being hosted on so running a python sub script and exchanging variables using JSON or any other similar solutions are entirely possible.

Apologies for any mistakes and my general lack of stack overflow skills :)

Thanks

After looking into the use of localStorage with JS I was able to find an accurate solution. I simplified my code for others who may face the same or a similar issue. Thanks for all those who helped :)

HTML

<form method="GET" action="index.php">
<input id="motion_image" type="image" value="1" name="x" src="img/btn1.png" onclick="return processInput(1)">
<input id="motion_image" type="image" value="2" name="x" src="img/btn2.png" onclick="return processInput(2)">
<input id="motion_image" type="image" value="3" name="x" src="img/btn2.png" onclick="return processInput(3)">
</form>

JavaScript

function processInput(x) {
    localStorage.eventType = x;
    checkEventType();
}

function checkEventType() {
    if (Number(localStorage.eventType) == 1) {
        runningInterval = setInterval(function() {
            localStorage.counter = Number(localStorage.counter) + 1;
        }, 10);
    } else if (Number(localStorage.eventType) == 2) {
        runningInterval = setInterval(function() {
            localStorage.counter = Number(localStorage.counter) - 1;
        }, 10);
    } else if (Number(localStorage.eventType) == 3) {
        window.alert("Your counter is at " + localStorage.counter);
    }
}

Why not get the date for each form submit? then compare those dates? You can save it to your database, too. I hope you get some idea. (sorry, I should have put this in the comment, but I still can't)

if you can trust user's system time :

when user clicks the button get the user's system time with javascript and send it to server;

at server save the time somewhere ... like session or db;

when user clicked the button for second time -> do those steps again;

and after all you can compare those times together;

//

with js you can send each period of times that user spend's on page too. for that whenever page loaded set the system time in some variable, and when user clicked the buttons get the time again and send both to server to get the exact spend time;