禁用按钮会破坏 php post

Question

我有一个按钮，A) 执行 PHP 脚本，B) 具有在脚本运行时隐藏/显示加载指示器的功能。

在脚本运行时，我想禁用该按钮。我遇到的问题是我可以禁用该按钮，但这会阻止 PHP 的东西运行。

按钮

<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 没有被触发。

我还尝试向按钮添加禁用的 onclick，但这只会导致页面刷新（加载程序显示一秒钟）并且似乎也不会触发 PHP。

最后我尝试添加

<script>

$("#CheckConnectionBtn").attr("disabled", true);

</script>

对于 PHP，但这会导致页面在单击按钮之前不显示任何内容。

如何禁用单击按钮但仍触发 php 和我的功能？

Answer 1

考虑以下代码。$(function() {&nbsp; function showWaiting() {&nbsp; &nbsp; $("#loader_id, #loader_text_id").show();&nbsp; }&nbsp; function endWaiting() {&nbsp; &nbsp; $("#loader_id, #loader_text_id").hide()&nbsp; }&nbsp;&nbsp;&nbsp; $("#CheckConnectionBtn").click(function() {&nbsp; &nbsp; var self = $(this);&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: "this.php",&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; CheckConnectionBtn: true&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; beforeSend: showWaiting,&nbsp; &nbsp; &nbsp; success: endWaiting&nbsp; &nbsp; });&nbsp; });});<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

首先将按钮替换为input type = button,Input尝试添加onclick = "return sub();"function sub() {document.getElementById('btn').disabled = true;//我要找的ID因为这里是输入标签的ID//&nbsp;document.forms[0].submit();}