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

Question

I have tried solving this but no matter what i try the button doesn't stay disabled for more than a second and won't execute my PHP script.

I have a restart button on my web page that when clicked sends an email to the admin to let them know a restart has been requested. I want this to be able to be clicked once then become greyed out to prevent multiple clicks. I want it to become active again after a certain amount of time

How can I get the Restart button to become clickable once (to rule out the possibility for too many script executions) and still execute the PHP script?

This is my code:

<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{

}

I have tried adding various javascript such as:

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

and

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

Answer 1

You have to change

onclick="countClicks();"

to

onclick="return countClicks();"

then your 2. solution does work.

Your 1. solution has multiple bugs. Don't wrap the code in a disable() function. And there is a # missing before 'button'.

I would do it like this:

onclick="disabled=true;" 

That's enough.

Because you commented that you don't get your second solution running, here is the code:

 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>

Answer 2

Well the button is working as intended. Since you don't use ajax/xhr here you reload your page when the form is submitted. That's why the button is resetted. If you don't want to use ajax/xhr just save your "status" and maybe the time in a session variable and change the button property according to it. Your html/php would look like this

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>

And your js like this (if you use 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);
});

Edit: I fixed the code a bit and added a time check in javascript.