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

Question

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

Answer 1

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);
    }
}