Disabling button breaks php post

Question

I have a button that A) executes a PHP script and B) has a function to hide/show a loading indicator while the script is running.

While the script is running I want to disable the button. The problem I'm running into is that I can disable the button, but this prevents the PHP stuff from running.

Button

<form method="post">
<button id="CheckConnectionBtn" name="CheckConnectionBtn" class="CheckConnectionBtn"  button onclick="ShowWaiting()">Test connection</button>
</form>

PHP

<?php
if(isset($_POST['CheckConnectionBtn'])){
 $output = shell_exec("/script.sh");
 $_SESSION["CONNECTION_CHECK"] = "$output";
}
?>

Function

<script>
function ShowWaiting() {
document.getElementById("loader_id").style.display = "block";
document.getElementById("loader_text_id").style.display = "block";
}
</script>

I tried adding $("#CheckConnectionBtn").attr("disabled", true); to the function but this causes the loader to show up indefinitely, it appears the PHP is not triggered.

I also tried adding a onclick disabled to the button but this only causes a refresh of the page (loader shows up for a sec) and also does not appear to trigger the PHP.

Finally I tried adding

<script>
$("#CheckConnectionBtn").attr("disabled", true);
</script>

To the PHP but this causes a page that doesn't display anything even before clicking the button.

How can I disable the button on click but still trigger the php and my function?

Have you check that the `jQuery` library is loaded before you attempt to execute that? Open your browser console and check for errors as this might give a better indication of why that line is causing a problem. **Also** you have `button` as a attribute within your `button` element, you might want to remove that — NewToJS, Apr 07 '20 at 01:45
Any alerts in Console? Since JS/jQuery runs in the browser and PHP runs on the server, it's not clear what is failing. A button in the Page cannot execute PHP. An AJAX call to a PHP Script can execute PHP. — Twisty, Apr 07 '20 at 01:46
How are you actually submitting the form? Is it a normal form http POST? There is no `action` on your `
` so it POSTs to the current page? If yes, then there is no point playing with the button attributes in JS, as your POST will trigger a page refresh and whatever you did to the button will be almost immediately lost as the page reloads. If you are *not* doing a normal form POST, you must be using JS to submit the form, eg an AJAX POST. If so, show us that code. — Don't Panic, Apr 07 '20 at 01:52
I'm very new to all this put I believe its posting to the same page as all my code is on the same page. Your explanation makes sense and I guess that is why I'm getting the results I'm getting. I made a work-around by hiding the button in my function and showing a fake button instead which works, but there must be a prettier/better way of doing it. — sjaak, Apr 07 '20 at 02:13
If you want to play with the displayed page *while* the form is processing (eg change button properties, show spinners, etc), the only way to do that is to have your form submit asynchronously, ie with AJAX. Clicking the submit button would not refresh the page, you can do what you want with the buttons, and the POST (or GET) is happening in the background. Search for "jQuery AJAX" for some examples, eg [here's a simple one on SO](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php). — Don't Panic, Apr 07 '20 at 04:28

score 0 · Answer 1 · answered Apr 07 '20 at 02:24

Consider the following code.

$(function() {
  function showWaiting() {
    $("#loader_id, #loader_text_id").show();
  }

  function endWaiting() {
    $("#loader_id, #loader_text_id").hide()
  }
  
  $("#CheckConnectionBtn").click(function() {
    var self = $(this);
    $.ajax({
      url: "this.php",
      data: {
        CheckConnectionBtn: true
      },
      method: "POST",
      beforeSend: showWaiting,
      success: endWaiting
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="CheckConnectionBtn" class="CheckConnectionBtn">Test Connection</button>

Making use of $.ajax(), you can setup the beforeSend callback to start the loading images and then in success callback, turn them off. This does not require a form since it's operating with AJAX. Obviously, replace this.php with the URL of your connection script.

score -1 · Answer 2 · answered Apr 07 '20 at 01:52

-1

First, replace the button with input type = button,Input attempts to add onclick = "return sub ();"function sub() {document.getElementById('btn').disabled = true;//The ID I'm looking for here is the ID of the input tag//document.forms[0].submit();}

answered Apr 07 '20 at 01:52

user13244075

1

Disabling button breaks php post

2 Answers2