使用Javascript停止双击提交按钮
这是我的情况。我有一个提交按钮。单击时，会进行一些后端/数据库验证，如果一切正常，请提交表单并禁用按钮，以便表单不能提交两次。如果未通过验证，则无法提交，且按钮保持活动状态，因此用户可以重新提交表单。听起来很简单，但我不能让它工作。这是一个C#web应用程序 我已尝试将代码添加到页面加载按钮。单击“提交”按钮时，如果验证失败，请删除禁用该按钮的代码。但这是我的问题。由于“禁用”代码已被删除，并且用户修复了任何错误并重新提交，因此可以多次单击该按钮，因为代码已不存在 我不想为此使用Ajax，因为后端检查非常复杂。还有别的办法吗？我曾尝试在“load”上添加“disable”代码，但在验证失败后回发时，该代码不起作用使用Javascript停止双击提交按钮,javascript,onload,Javascript,Onload,这是我的情况。我有一个提交按钮。单击时，会进行一些后端/数据库验证，如果一切正常，请提交表单并禁用按钮，以便表单不能提交两次。如果未通过验证，则无法提交，且按钮保持活动状态，因此用户可以重新提交表单。听起来很简单，但我不能让它工作。这是一个C#web应用程序 我已尝试将代码添加到页面加载按钮。单击“提交”按钮时，如果验证失败，请删除禁用该按钮的代码。但这是我的问题。由于“禁用”代码已被删除，并且用户修复了任何错误并重新提交，因此可以多次单击该按钮，因为代码已不存在 我不想为此使用Ajax，因为后
if (window.addEventListener)
window.addEventListener("load", lockSubmit, false);
else if (window.attachEvent)
window.attachEvent("onload", lockSubmit);
else window.onload = lockSubmit;
window.onload = function(){
// Insert the following function somewhere in your .js file / section
(function prevent_over_submitting(){
var form = document.forms.theform;
if(form || form.nodeName == 'FORM'){
form.onsubmit = function(){
form.submit.value = 'Proccesing...';
form.submit.disabled = true;
};
}
})();
};
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<input type="text" name="lastname" value="" />
<input type="submit" name="submit" value="submit" />
</form>
更新： 上面代码片段背后的逻辑
// server-side code (rather in pseudo-code this time)
if(form_has_been_submitted){ // check if the form has been submitted
errors[] = validate_data(post_data); // call the method to validate data
if(errors_array_is_empty){ // if everything is fine
submit_data(); // submit data
redirect_or_do_something; // (maybe) do other things
} // otherwise don't do anything
}
// validation method
validate_data(post){ // the only argument here represents all your form data
error = array;
if(post['firstname'] == wrong){ // check for error
error['firstname'] = 'Check your firsname'; // if you found one, push it to the error array
}
if(post['lastname'] == wrong){ // the same as in previous case
error['lastname'] = 'Check your lastname'; // the same as in previous case
}
return error; // return that array, it might be full or empty
}
// client-side code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<script type="text/javascript">
// the JavaScript snippet from above
</script>
</head>
<body>
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<!-- show the error if you found one, otherwise show an empty string -->
<span><% (error['firstname'] ? error['firstname'] : "") %></span>
<input type="text" name="lastname" value="" />
<!-- same as in the previous case -->
<span><% (error['lastname'] ? error['lastname'] : "") %></span>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
//服务器端代码（这次是伪代码）
如果（表格已提交）{//检查表格是否已提交
errors[]=validate_data（post_data）；//调用该方法来验证数据
if（errors\u array\u为空）{//如果一切正常
submit_data（）；//提交数据
重定向或做某事；/（可能）做其他事情
}//否则什么也不要做
}
//验证方法
validate_data（post）{//此处唯一的参数表示所有表单数据
错误=数组；
如果（post['firstname']==错误）{//检查错误
错误['firstname']='检查您的firsname'；//如果您找到了一个，请将其推送到错误数组中
}
if（post['lastname']==错误）{//与前面的情况相同
错误['lastname']='Check your lastname'；//与前面的情况相同
}
返回错误；//返回该数组，它可能已满或为空
}
//客户端代码
我的申请
//上面的JavaScript代码片段
如您所见，上面的JavaScript代码片段只禁用了提交按钮onclick以防止过度提交；一旦页面再次加载，它将被启用。这不是我最喜欢的验证方式，但我遵循了您的逻辑。您可以在onclick函数中添加以下代码： 首先，添加一个全局javascript变量，比如说
var click=falseif(click){
return false
} else {
your normal validation code
}
setInterval if (window.addEventListener)
window.addEventListener("load", lockSubmit, false);
else if (window.attachEvent)
window.attachEvent("onload", lockSubmit);
else window.onload = lockSubmit;
单击变量的状态在第一次单击后将保持为真，并将进一步停止多次单击，除非页面重新加载或我们通过代码手动重置变量。请显示lockSubmit Codec是否更精确？请创建一个提琴来支持您的问题。如果您不使用Ajax，您不应该为JavaScript操心。如果表单成功提交，为什么要禁用该按钮？只是不再显示它；在成功时显示消息或给他们返回表单，以便在出现错误时再次提交该表单-就是这样。@HEX4949，即使表单已成功提交，处理该表单也需要很长时间，有些用户再次单击该按钮。我已经有一个悸动，但有些人仍然点击按钮。现在我需要禁用它。检查下面的答案，让我知道你是否发现它有用我需要先做一些后端验证，只有当它通过时，我提交表单并禁用按钮。如果验证未通过，我无法禁用该按钮。@LacHo您在混合东西；）form.submit意味着开始处理表单数据，而不是将数据提交到数据库。您可以在客户端使用JavaScript验证数据，在服务器上使用C#（在您的情况下）验证数据，或者您可以将这两种方法结合使用-a）在客户端使用JavaScript验证数据，然后在服务器上再次验证数据（因为客户端验证不安全或b）在客户端不验证数据，仅通过JavaScript（Ajax）发送表单数据，在服务器上验证它们并发送反馈。我喜欢最后一个。既然你说过你不会用JavaScript做这件事，那么上面的代码片段就是最好的解决方案。检查更新的答案。我认为你是对的。我在混合东西，最好做Ajax。只是我需要向服务方法传递一个大对象，但这不起作用。我必须想出另一种方法来发送对象。谢谢你的代码和jsBin@你提交的是二进制文件还是文本数据？如果您想使用JavaScript，请告诉我，我将向您展示其逻辑。无论如何，如果你需要任何进一步的帮助，就在这里给我写张便条；）我知道你的回答是正确的，并为老年退休金计划的问题提供了一个有效的答案——但这已经有5年多的历史了——真的有必要打破这样一个旧的思路吗？