Javascript 一键验证后禁用提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13959256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Submit Button after one click with validation?
提问by Jeremy Chambers
I have a form that is passing data to a cc processing terminal, as well as writing PDF contracts and receipts. There is validation built into the form, and I am trying to add a function to disable the submit button after one click provided validation is passed.
我有一个表单将数据传递到抄送处理终端，以及编写 PDF 合同和收据。表单中内置了验证，我正在尝试添加一个功能以在通过单击提供的验证后禁用提交按钮。
I don't know a lot about post data, but I want to make sure it:
我对发布数据了解不多，但我想确定一下：
1. Still posts the data.
2. Still validates.
3. Does not allow the user to submit multiple times.
1. Still posts the data.
2. Still validates.
3. Does not allow the user to submit multiple times.
Here is my POST chunk of code:
这是我的 POST 代码块：
<form method="POST" action="partner_register_ihg.php" onSubmit="javascript:return WebForm_OnSubmit();" id="docContainer" autoeventwireup="true" enctype="multipart/form-data" novalidate class="fb-toplabel fb-100-item-column fb-large selected-object" style="width: 800px;" data-form="preview">
And here is my submit section
这是我的提交部分
<input type="submit" name="subbutton" onClick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("subbutton", "", true, "", "", false, false))' id="subbutton" class="fb-button-special" value="Submit" />
Here is a small section of my validation code
这是我的验证代码的一小部分
var RequiredFieldValidator30 = document.all ? document.all["RequiredFieldValidator30"] : document.getElementById("RequiredFieldValidator30");
RequiredFieldValidator30.controltovalidate = "item56_text_1";
RequiredFieldValidator30.errormessage = "Please enter the shipping zip code.";
RequiredFieldValidator30.display = "None";
RequiredFieldValidator30.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator30.initialvalue = "";
var RequiredFieldValidator31 = document.all ? document.all["RequiredFieldValidator31"] : document.getElementById("RequiredFieldValidator31");
RequiredFieldValidator31.controltovalidate = "item62_0_checkbox";
RequiredFieldValidator31.errormessage = "Please agree to Terms and Conditions.";
RequiredFieldValidator31.display = "None";
RequiredFieldValidator31.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator31.initialvalue = "";
var ValidationSummary1 = document.all ? document.all["ValidationSummary1"] : document.getElementById("ValidationSummary1");
ValidationSummary1.showmessagebox = "True";
ValidationSummary1.showsummary = "False";
回答by Disa
In your submit button code just add javascript code:
<input type="submit" [...] id="btn1" onclick="setTimeout(disableFunction, 1);">and in Javascript add function:
在您的提交按钮代码中，只需添加 javascript 代码：
<input type="submit" [...] id="btn1" onclick="setTimeout(disableFunction, 1);">并在 Javascript 中添加函数：
function disableFunction() {
document.getElementById("btn1").disabled = 'true';
}
回答by Nitin kumar Dwivedi
You can you if you are using jQuery form validator
如果您使用的是 jQuery 表单验证器，您可以
$(document).ready(function () {
$("#addOfficerForm").submit(function () {
var total_error = document.querySelectorAll('.error').length;
if(total_error === 0){
document.getElementById("checkEditRestriction").disabled = 'true';
}
});
});
