3

我有一个表格，可以将数据传递到 cc 处理终端，以及编写 PDF 合同和收据。表单中内置了验证，我正在尝试添加一个功能以在单击提供的验证通过后禁用提交按钮。

我不太了解发布数据，但我想确保它：

1. Still posts the data. 2. Still validates. 3. Does not allow the user to submit multiple times.

这是我的 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">

这是我的提交部分

<input type="submit" name="subbutton" onClick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("subbutton", "", true, "", "", false, false))' id="subbutton" class="fb-button-special" value="Submit" />

这是我的验证代码的一小部分

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";
4

3 回答 3

6

在您的提交按钮代码中，只需添加 javascript 代码： <input type="submit" [...] id="btn1" onclick="setTimeout(disableFunction, 1);"> 并在 Javascript 中添加函数：

function disableFunction() {
    document.getElementById("btn1").disabled = 'true';
}
于 2012-12-19T19:04:59.823 回答
2

如果您使用 jQuery 表单验证器，您可以

$(document).ready(function () {
    $("#addOfficerForm").submit(function () {
        var total_error = document.querySelectorAll('.error').length;
        if(total_error === 0){
            document.getElementById("checkEditRestriction").disabled = 'true';
        }  
    });
});
于 2019-12-03T10:06:07.093 回答
0

HTML：

<button type="button" id="btnSubmit"> Submit </button>

jQuery/js：

$('#btnSubmit').click(function(e){
 e.preventDefault();
 if(this.form.reportValidity()){
  $(this).prop('disabled',true);
  this.form.submit();
 }
});
于 2021-02-08T03:19:18.043 回答