防止在PHP或JavaScript中多次单击时提交多个表单_Javascript_Php_Jquery

防止在PHP或JavaScript中多次单击时提交多个表单

javascript php jquery

防止在PHP或JavaScript中多次单击时提交多个表单,javascript,php,jquery,Javascript,Php,Jquery,我想防止多次单击时多次提交表单我实际上想把数据插入数据库。这个过程需要一些时间，比如2-3秒问题是，在2-3秒内，访问者可以点击该按钮6-7次，它会一遍又一遍地运行脚本我怎样才能预防它我尝试了以下代码： <!DOCTYPE html> <head> <title>My Form</title> </head> <body> <form action="process.php" met

我想防止多次单击时多次提交表单

我实际上想把数据插入数据库。这个过程需要一些时间，比如2-3秒

问题是，在2-3秒内，访问者可以点击该按钮6-7次，它会一遍又一遍地运行脚本

我怎样才能预防它

我尝试了以下代码：

<!DOCTYPE html>
  <head>
    <title>My Form</title>
  </head>
  <body>
    <form action="process.php" method="post">
      <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
        <div>
      <label for="name">Name</label>
      <input type="text" name="name" />
      <div>
        <div>
          <input type="submit" value="Add Name" onclick="this.disabled=true;return true;" />
        </div>
      </form>
  </body>
</html>


我的表格
我认为最简单的方法是通过ajax发送表单，并关闭按钮，直到收到响应
var submitted = false;
$('#your_form').submit(function(e) {
    e.preventDefault();
    if (submitted) {
        return;
    }
    submitted = true;
    $.post('your_url', $(this).serialize(), function() {
        console.log('success');
        submitted = false;
    }, function() {
        console.log('error');
        submitted = false;
    });
});

这只是一个例子，你们当然可以扩展它，显示一些弹出窗口，在成功后重新加载页面或者其他什么
我建议不要禁用按钮2-3秒。编程中的任何操作都应该基于实时操作，而不是硬编码。您可以通过禁用按钮2-3秒来避免双击表单，但在以下情况下仍然很糟糕：
-响应时间为0.2秒，如果出现错误，用户应该能够重新发送表单
-用户连接速度慢，5秒后有响应，他仍然可以发送另一个表单，但他不应该在单击后用javascript禁用按钮。
如果使用ajax提交表单，则在用户提交表单时使用一个标志，并在收到响应时更改该标志。请参阅下面的代码

var processFlag=false
$（'form'）。提交（函数（e）{
e、 预防默认值（）
if（processFlag==true）{
返回；
}
processFlag=true
$.ajax({
//你的设置
})
.done（函数（）{
processFlag=false
})
})
您可以阻止用户界面，这样即使用户尝试单击“用户界面阻止”，一旦成功，也不会允许或取消阻止用户界面
我建议使用事件捕获表单提交（用户可以在字段上使用enter键提交事件），然后设置标志以防止重新提交，并禁用字段集以防止任何其他提交

var submitted=false；
document.querySelector（“#add form”）.addEventListener（'submit'，函数（evt）{
如果（已提交）{
evt.preventDefault（）；
}否则{
提交=真实；
this.querySelector（'fieldset'）.setAttribute（'disabled'，'disabled'）；
}
});

我的表格
当表单提交正在进行时，您可以像这样禁用提交按钮。因此该按钮将被禁用，直到表单提交完成
首先，为提交按钮提供一个id。例如id=“myButton”


onsubmit=“document.getElementById（'myButton'）。disabled=true；
document.getElementById（'myButton'）。value='正在提交，请稍候…'

表格将是
<form action="test.php" method="post"
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"
>


禁用按钮2/3秒我尝试过，但表单操作不起作用。。。！！！“照@Shree说的去做”可能是重复的，我已经在很多项目中这样做了，而且效果很好。
<form action="test.php" method="post"
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"
>