Question

我想阻止多次点击提交多个表单。

我实际上想将数据插入数据库。这个过程需要一点时间，比如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>

Answer 1

您可以在表单提交正在进行时禁用提交按钮。因此，按钮将被禁用，直到表单提交完成。

首先，为您的提交按钮指定一个ID。例如id="myButton"

<input type="submit" value="Submit" id="myButton" />

onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"

表格将是

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

Answer 2

我认为最简单的方法是通过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秒，他仍然可以发送另一个表单而他不应该

Answer 3

点击后使用javascript禁用该按钮。如果您使用ajax提交表单，请在用户提交时使用标志，并在获得响应时更改标志。见下面的代码

＆＃13;

var processFlag = false
$('form').submit(function(e){
  e.preventDefault()
  if(processFlag === true){
    return;
  }
  processFlag = true
  $.ajax({
  //your settings
  })
  .done(function(){
    processFlag = false
  })
})

＆＃13;

Answer 4

您可以阻止ui，以便即使用户尝试单击ui block也不会允许和取消阻止ui成功。

http://jquery.malsup.com/block/

Answer 5

我建议使用事件来捕获表单提交（用户可以在字段上输入事件提交事件），然后设置一个标志以防止重新提交并禁用字段集以防止任何其他提交

var submitted = false;
document.querySelector('#add-form').addEventListener('submit',function(evt) {
  if(submitted) {
    evt.preventDefault();
  } else {
    submitted = true;
    this.querySelector('fieldset').setAttribute('disabled','disabled');
  }
});

<!DOCTYPE html>
<html>
  <head>
    <title>My Form</title>
  </head>
<body>
<form action="process.php" method="post" id="add-form">
  <fieldset>
    <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
    <div>
       <label>Name <input type="text" name="name" /> </label>
    </div>
    <div>
      <input type="submit" value="Add Name" />
    </div>
  </fieldset>
</form>
</body>
</html>

P.S。我在html中修复了一些错误类型并将字段集添加到表单中 P.p.s.考虑到你的代码，我认为你不使用jquery，所以我发布了一个vanilla js，但如果你使用jquery，你可以使用相同的脚本进行一些小的编辑

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

5 个答案: