PHP代码不能与“onclick”上的JS函数一起使用答案

【问题标题】：PHP code doesnt work together with JS function on "onclick"PHP代码不能与“onclick”上的JS函数一起使用
【发布时间】：2018-06-06 15:03:20
【问题描述】：

我有一个按钮，我希望它在其中执行 2 个任务； php和js。 php部分：每次按下按钮时生成不同的文本。 js部分：禁用按钮5秒，然后重新启用。

HTML

 <button onclick = "disable();"  class=btnGenerate type="submit" id="submit" name="submit" >GENERATE</button>

PHP

if(isset($_POST['submit'])){
$num=mt_rand(1,10);
$result=mysqli_query($con,"SELECT * from quote_table where id=$num");
$row = $result->fetch_assoc();}

 <script>
function disable(){
  document.getElementById("submit").disabled = true;
  setTimeout(function() { enable(); }, 5000);    }

function enable(){
  document.getElementById("submit").disabled = false;
}</script>

PHP 部分仅在我删除 html 上的 "onclick = "disable();" 时有效，但当我添加它时似乎不起作用。按钮可以执行 PHP 和 JS单击一下？提前致谢。

【问题讨论】：

只需删除 type="submit" 并运行代码
@SantoshSuryawanshi — 这不应该有任何区别。 type="submit" 是默认值，没有明确测试该属性。
@SantoshSuryawanshi 没用。
我不明白你对这段代码的意图。如果您正在提交表单： 1. 禁用的输入不会添加到传递给服务器的表单数据中 2. 页面将重新加载，使 enable() 函数毫无意义。您还应该使用 addEventListener() 来处理表单元素上的事件，而不是将 javascript 内联。
我使用按钮的意图是，当用户按下按钮时，php代码将执行并从数据库中获取文本以显示在页面上，同时在每次点击后, 按钮将被 js 禁用 5 秒,, @JonathanEltgroth

标签： javascript php html button

【解决方案1】：

禁用的按钮不能成为成功的控件。

如果要禁用它，请不要依赖表单数据中提交的提交按钮的名称/值。

将isset($_POST['submit']) 替换为其他条件。

【讨论】：

那么我可以使用什么作为另一个条件，这样当按下按钮时，php代码将与js一起执行。
您可以测试它是否是 POST 请求而不是 GET 请求。您可以测试表单中是否存在其他一些数据。您可以只拥有生成表单的代码和处理不同 PHP 程序中的表单提交的代码。名单还在继续。
@DanialWafiy，我认为您误解了 PHP 和 JS 的工作方式。 PHP 和 JS 不能相互配合。它们是在不同环境中运行的独立代码，服务器上的 PHP，浏览器中的 JS。它们不能同时运行。
@JonathanEltgroth — 这是一个提交按钮。单击它会提交一个表单。这会触发 HTTP 请求。这会导致服务器运行一些 PHP。
是的，我明白了，但似乎他在问为什么 javascript 不能与 PHP 结合使用，就像他想提交表单并且仍然在页面功能上有 js，即使他没有使用 ajax 请求。这是不可能的。提交表单后，javascript 不再有效，因为浏览器即将接受新请求并重新生成新页面。

【解决方案2】：

如果您触发表单提交，除非您使用 AJAX，否则页面将简单地重新加载，呈现 enable() 方法没有实际意义，除非您正在使用它在失败条件下或打开时重新启用按钮通过 AJAX 成功返回数据。

在我看来，您正在尝试通过请求向服务器获取数据，而不重新加载页面，然后在返回数据后重新启用提交按钮。在这种情况下，您需要使用 AJAX。

HTML

<form action="/" method="post" id="form">
  <button class=btnGenerate type="submit" id="submit" name="submit" >GENERATE</button>
</form>

<script>
document.getElementById('submit').addEventListener('click', function(event){
  event.preventDefault(); // prevents browser from submitting form
  var form = document.getElementById('form');
  var submit = document.getElementById('submit');
  // using JQuery ajax
  $.ajax(form.action, {
    data: form.serialize(),
    beforeSend: function() { // runs before ajax call made
      // disable submit button
      submit.disabled = true;
    },
    success: function(response) {
      console.log(response);
      // deal your return data here
    },
    error: function(error) {
      console.log(error);
      // deal with error
    },
    complete: function() { // runs when ajax call fully complete
      // renable submit button
      submit.disabled = false;
    }
  });
});
</script>

【讨论】：