Отключение разрывов кнопок php пост

Question

У меня есть кнопка, которая A) выполняет сценарий PHP и B) имеет функцию скрытия / отображения индикатора загрузки во время выполнения сценария.

Во время выполнения сценария я хочу отключить кнопка. Проблема, с которой я сталкиваюсь, заключается в том, что я могу отключить кнопку, но это препятствует запуску PHP.

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

Функция

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

Я пытался добавить $("#CheckConnectionBtn").attr("disabled", true); к функции, но это заставляет загрузчик появляться бесконечно, кажется, PHP не запускается.

I также попытался добавить отключенный onclick к кнопке, но это вызывает только обновление sh страницы (загрузчик отображается для се c), а также не вызывает запуск PHP.

Наконец, я попытался добавить

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

к PHP, но это вызывает страницу, которая ничего не отображает даже до нажатия кнопки.

Как отключить кнопку при нажатии, но все еще вызывает php и моя функция?

Answer 1

Рассмотрим следующий код.

$(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>

Используя $.ajax(), вы можете настроить обратный вызов beforeSend для запуска загрузки изображений, а затем при успешном обратном вызове отключить их. Для этого не требуется форма, поскольку она работает с AJAX. Очевидно, замените this.php URL-адресом вашего сценария подключения.

Answer 2

Сначала замените кнопку на тип ввода = кнопка, ввод пытается добавить onclick = "return sub ();" function sub () {document.getElementById ('btn'). Disabled = true; / / Идентификатор, который я здесь ищу, - это идентификатор тега ввода / / document.forms [0] .submit ();}