防止在 PHP 或 JavaScript 中多次点击提交多个表单
[英]Prevent multiple form submission on multiple clicks in PHP or JavaScript
问题描述
我想防止多次点击提交多个表单。
我实际上想将数据插入到数据库中。 这个过程需要一点时间，比如 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>
5 个解决方案
解决方案1
1 2017-10-23 08:58:23
当表单提交正在进行时，您可以禁用提交按钮，因此该按钮将被禁用，直到表单提交完成。
首先，给你的提交按钮一个 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...';"
>
解决方案2
0 2017-10-23 08:18:40
我认为最简单的方法是通过 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 秒后出现几秒钟，他仍然可以发送另一个表格，而他不应该
解决方案3
0 2017-10-23 08:21:11
单击后使用 javascript 禁用按钮。 如果您使用 ajax 提交表单，请在用户提交时使用标志，并在收到响应时更改标志。 看下面的代码
var processFlag = false $('form').submit(function(e){ e.preventDefault() if(processFlag === true){ return; } processFlag = true $.ajax({ //your settings }) .done(function(){ processFlag = false }) })
解决方案4
0 2017-10-23 08:21:36
您可以阻止 ui，这样即使用户尝试单击 ui 阻止也不会允许并在成功后取消阻止 ui。
解决方案5
0 2017-10-23 08:43:21
我建议使用事件来捕获表单提交（用户可以通过在字段上输入提交事件），然后设置一个标志以防止重新提交并禁用字段集以防止任何其他提交
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>
Ps 我已经修复了 html 中的一些错误输入并将字段集添加到表单 Pps 考虑到您的代码我认为您没有使用 jquery，所以我发布了一个 vanilla js，但是如果您使用 jquery，您可以使用相同的脚本稍作修改
php html javascript提交表单后保留多个值
[英]php html javascript keep multiple values selected after form submission
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.