如何让这个计时器仅在提交表单时启动，然后执行 php 代码 1st。然后禁用提交按钮，等待 30，然后重新启用？

Question

我已经创建了一个简单的 HTML 表单来提交 php 代码来更新我的 mysql table.

我遇到的问题是计时器可以通过简单地刷新（假设它还没有倒计时）我不想要的页面来启动。我只希望它在提交表单时启动。

此计时器所需的要求：首先在单击提交按钮后执行 php 代码。然后禁用表单提交按钮 30 秒，然后在计时器结束后重新启用。这个计时器保存到本地存储，我相信它不会被页面刷新中断（不会重新开始），一旦它已经倒计时，这很好。

这是我使用定时器功能的图片：(https://imgur.com/ybWB7Ph)

这里是js定时器代码：

<script>
var time = 30;
var saved_countdown = localStorage.getItem('saved_countdown');

if(saved_countdown == null) {
   
    var new_countdown = new Date().getTime() + (time + 2) * 1000;

    time = new_countdown;
    localStorage.setItem('saved_countdown', new_countdown);
} else {
    time = saved_countdown;
}
    var x = setInterval(() => {
    var now = new Date().getTime();
    var distance = time - now;
    var counter = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("demo").innerHTML = counter + " s"; 
    if (counter <= 0) {
        clearInterval(x);
        localStorage.removeItem('saved_countdown');
        document.getElementById("demo").innerHTML = "Available";
    }
}, 1000);
</script>

我的 html 表单设置如下：

<form action="" method="post">
            <label for="players">Select your weapon:</label>
                <select name="xWeapon">
                    <option value="" disabled selected>Choose option</option>
                    <option value="xKnife">Knife [FREE]</option>
                    <option value="xMachete">Machete []</option>
                    <option value="xPistol">Pistol []</option>
                    <option value="xMachine_gun">Machine Gun [5]</option>
                </select><br><br>
            <input type="submit" name="link_to_php" value="Attempt">
        </form><br>

Answer 1

将按钮设置为默认禁用。如果您需要第一次使用它，请使用 $_POST 值检查是否有按钮提交：

<?php $disable = isset($_POST['link_to_php']) ? '':'disabled'; ?>

<input type="submit" name="link_to_php" value="Attempt" id="myButton" <?=$disabled?>>

计数器为0时启用：

if (counter <= 0) {
    ....
    document.getElementById('myButton').disabled = false;

如何让这个计时器仅在提交表单时启动，然后执行 php 代码 1st。然后禁用提交按钮，等待 30，然后重新启用？

How to get this timer to Only start upon form submission, then to execute php code 1st. then disable submit button, wait 30, then re-enable?

html

javascript

php

timer