这是我的情况。我有一个提交按钮。单击后，将进行一些后端/数据库验证，如果一切正常，请提交表单并禁用该按钮，以使该表单不能两次提交。如果未通过验证，则无法进行提交并且按钮保持活动状态，因此用户可以重新提交表单。听起来很简单，但我无法使其正常工作。这是一个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>
这里是工作中的jsBin，所以您可以玩耍。
更新：
上面代码段背后的逻辑
// 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>
您可以看到，上面的JavaScript代码段仅禁用onclick的提交按钮，以防止过度提交；再次加载页面后，它将启用。这不是我最喜欢的验证方式，但我遵循了您的逻辑。
您可以在onclick函数中添加此代码
添加一个全局javascript变量，例如var click = false；
并在验证发生之前添加此条件如果（点击）{返回假}其他{您的正常验证码}
如果您的页面在您每次提交时都重新加载，则无需进一步添加任何内容，但是如果不需要，则添加setInterval方法，如果验证失败，该方法将重置click变量以供下次使用。
click变量的状态在首次单击后将保持为true，并且将进一步停止多次单击，除非重新加载页面或我们通过代码手动重置该变量。