Question

我有一个按钮，我希望它执行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();}

JS

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

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

PHP部分仅在我删除html上的＆＃34; onclick =＆＃34; disable（）;＆＃34; 时才有效，但是当我添加它时，它似乎工作正常。只需单击一个按钮就可以执行PHP和JS吗？提前谢谢。

Answer 1

禁用按钮无法成功控制。

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

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

Answer 2

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

听起来像是你试图通过请求获取数据到服务器，而无需重新加载页面，然后在返回数据后重新启用提交按钮。在这种情况下，您需要使用AJAX。

<强> HTML

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

<强> JS

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

PHP代码与＆＃34; onclick＆＃34;上的JS函数不兼容。

2 个答案: