我怎样才能让我的提交按钮可点击一次并仍然执行我的 php？答案

【问题标题】：how can i make my submit button clickable once and still execute my php?我怎样才能让我的提交按钮可点击一次并仍然执行我的 php？
【发布时间】：2019-08-01 14:01:14
【问题描述】：

我已尝试解决此问题，但无论我尝试什么，按钮都不会保持禁用状态超过一秒钟，并且不会执行我的 PHP 脚本。

我的网页上有一个重启按钮，点击该按钮后会向管理员发送一封电子邮件，让他们知道已请求重启。我希望它能够被点击一次然后变成灰色以防止多次点击。我希望它在一定时间后再次激活

如何使重新启动按钮变为可单击一次（以排除执行过多脚本的可能性）并仍然执行 PHP 脚本？

这是我的代码：

<form action=index.php method= "post">
<input type="submit" value="Request Restart" id="alertTimerButton" name="clickMe" onclick="countClicks();"/>

<?php
if (isset($_POST['clickMe']))
{
    exec("/anaconda3/bin/python /Users/shoot_station_5/Sites/simpleblogs/restartemail.py \"$input_val\""); 
} else{

}

我尝试添加各种 javascript，例如：

function disable()
  $(document).ready(function(){
      $('.once-only').submit(function(){
      $(this).children('button').prop('disabled', true);
      alert("Thankyou a restart has been requested.");
  });
});

和

<script type="text/javascript">
  var ClickCount = 0;
  function countClicks() {
    var clickLimit = 1; //Max number of clicks
    if(ClickCount>=clickLimit) {
      alert("a restart has already been requested");
      return false;
    }
    else
    {
      ClickCount++;
      alert("Thankyou a restart has been requested.");
      return true;
    }
  }

【问题讨论】：

在提交表单之前使用一些javascript函数禁用按钮。
我建议使用 localstorage 来存储按钮应该再次处于活动状态的日期，否则如果页面刷新，按钮将再次启用。
在我看来您正在提交页面，而 PHP 正在将您返回到相同的页面？这意味着一个新的 JavaScript “上下文”，因此需要做一些比禁用按钮更复杂的事情。您想在一段时间后重新启用，还是在特定事件上重新启用？
你可以让php在按钮被点击的时候添加一个$_SESSION["Clicked"] = "true"。然后你可以添加一个禁用按钮的类，例如<?php if(isset($_SESSION['Clicked']) && $_SESSION['Clicked'] == 'true') { echo "class = 'disabled'" } ?>

标签： javascript php jquery html css

【解决方案1】：

你必须改变

onclick="countClicks();"

到

onclick="return countClicks();"

那么您的 2. 解决方案确实有效。

您的 1. 解决方案有多个错误。不要将代码包装在 disable() 函数中。 '按钮'之前缺少一个#。

我会这样做：

onclick="disabled=true;"

够了。

因为您评论说您没有让您的第二个解决方案运行，所以这里是代码：

var ClickCount = 0;
function countClicks()
{
    var clickLimit = 1; //Max number of clicks
    if (ClickCount >= clickLimit)
    {
        alert("a restart has already been requested");
        return false;
    }
    else
    {
        ClickCount++;
        alert("Thank you a restart has been requested.");
        return true;
    }
}

<form action="#" method="post">
    <input type="button" value="Request Restart" id="alertTimerButton" name="clickMe" onclick="return countClicks();"/>
</form>

【讨论】：

我改变了 countClicks();返回 countClicks();但它仍然允许第二次点击
这在按钮上按预期工作，感谢您提供代码示例。唯一的问题是现在输入类型是按钮，这意味着它不会提交给 PHP，所以我不能让我的脚本运行。
尝试将onsubmit="return countClicks();" 附加到您的<form>。

【解决方案2】：

按钮按预期工作。由于您在这里不使用 ajax/xhr，因此您在提交表单时重新加载页面。这就是按钮被重置的原因。如果您不想使用 ajax/xhr，只需保存您的“状态”以及会话变量中的时间并根据它更改按钮属性。你的 html/php 看起来像这样

session_start();
if (isset($_POST['clickMe'])) {
    $_SESSION['restarted'] = time();
}
session_write_close();
$timeout = 300; // 5 min
$timer = time();
$disabled = false;
if (isset($_SESSION['restarted']) && ($timer - $_SESSION['restarted']) < $timeout) {
    $disabled = true;
}

.. (html stuff) ...
<form action=test.php method= "post">
    <input type="hidden" name="timer" value="<?php echo (isset($_SESSION['restarted']) ? $_SESSION['restarted'] : null)?>" />
    <input type="submit" <?php echo ($disabled ? 'disabled="true"' : null)?> value="Request Restart" id="alertTimerButton" name="clickMe"/>
</form>

你的 js 是这样的（如果你使用 jquery）

$(document).ready(function(){
    $('form').on('submit', function(e){
        alert("Thankyou a restart has been requested.");
        return true;
    });

    var restart_time = parseInt($('input[name="timer"]').val());
    var cur_time;
    setInterval(function(){ 
        cur_time = Math.floor(Date.now() / 1000);
        if (cur_time - restart_time > 300000) {
            $('#alertTimerButton').prop('disabled', false);
        }
    }, 5000);
});

编辑：我稍微修正了代码并在 javascript 中添加了时间检查。

【讨论】：