我的情况是这样的。我有一个提交按钮。点击后端/数据库验证,如果一切正常,提交表单并禁用按钮,这样表单就不会被提交两次。如果它没有通过验证,则不能进行提交,并且按钮保持活动状态,因此用户可以重新提交表单。这听起来很简单,但我做不到。这是一个c# web应用程序
我已经尝试在页面加载时将代码添加到按钮。单击提交按钮后,如果验证失败,则删除禁用该按钮的代码。但我的问题是。由于"禁用"代码被删除,用户修复任何错误并重新提交,由于代码不再存在,可以多次点击该按钮。
我不想使用Ajax,因为后端检查非常复杂。还有别的办法吗?我试过在"加载"上添加"禁用"代码,但当验证失败时,它不能在post上工作。
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
;
,并在验证发生前添加以下条件:
if(click){
return false
} else {
your normal validation code
}
如果你的页面在每次提交时都重新加载,那么就不需要再添加任何东西了,但是如果没有,那么就添加setInterval
方法,如果验证失败,它将重置click变量以供下次使用。
在第一次点击后,click变量的状态将保持为true,并将进一步停止多次点击,除非页面重新加载或我们通过代码手动重置该变量。