How do I make a HTML button tag unclickable after one click?

问题

Currently assigned the task of creating a website which uses python to visualize a network. With this, after clicking a button, the python script will run off of specific parameters the user sets. To avoid a huge load request, we only want the user to click the button once, and not be able to run the script multiple times. The idea we came up with was having the button be clicked once, and then after the one request, become disabled(until they refresh the page, although I know they can just run it again, but we will discuss that problem once we get there). We are currently using an anchor tag to call upon the python script using PHP as well. I believe that since we are using an anchor tag, we may have to change the href attribute of the anchor tag so that it just doesn't run the python script numerous times, making the button useless even if its clickable.

We've tried using JavaScript functions:

let toggleVisual = false;

let hideVisual = function() {
  let visual = document.getElementsById('visual');

  if (toggleVisual = false) {
    visual.disabled = true;
    toggleVisual = true;
  }
}

and more JavaScript:

document.getElementById('form-button').onclick = function () {
    this.disabled = true;
}

and even some HTML:

<a href="?run=true" onclick="return false;"><button  id="form-button" class="visualize-btn">Visualize</button></a>

PHP code calling python script:

   <?php
   if (isset($_GET["run"])) {
      $output = shell_exec('sh test.sh');
      echo "<pre>$output</pre> works";
    }
   ?>

I expect that when I click the button to run the script, the button (or anchor tag) will become disabled, ensuring that the python script won't run multiple times.

回答1:

Welcome to StackOverflow! You were close.. Check out the onclick() event, you'll probably like it. A simple code based on your first attempt would be something like:

<button id="form-button" class="visualize-btn" onclick="doSomething();">Visualize</button>

<script type="text/javascript">
var wasClicked = false;
function doSomething() {
    if(wasClicked) { return; }
    wasClicked = true;

   // Your code here
   alert('Hello world!');
}
</script>

Best of luck with your website!

来源：https://stackoverflow.com/questions/57169024/how-do-i-make-a-html-button-tag-unclickable-after-one-click

标签

javascript

php

html

button

anchor