结合验证 Javascript 和禁用提交按钮 Javascript 以防止提交多个表单

Question

我有一个基本表单需要提交多个表单，所以我想在检查完所有必填字段后禁用提交按钮以防止出现这种情况。

这是我的表单代码。

<script src="required_fields.js" type="text/javascript"></script>

<form action="mail.php" method="post" onsubmit="return formCheck(this);">
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><strong>Company Name:</strong></td>
<td><label><span style="display: none;">Company Name</span><input type="text" name="companyname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> First Name:</strong></td>
<td><label><span style="display: none;">First Name</span><input type="text" name="firstname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Last Name:</strong></td>
<td><label><span style="display: none;">Last Name</span><input type="text" name="lastname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Street Address:</strong></td>
<td><label><span style="display: none;">Street Address</span><input type="text" name="address1" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong>Suite/Apt:</strong></td>
<td><label><span style="display: none;">Suite/Apt</span><input type="text" name="address2" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> City:</strong></td>
<td><label><span style="display: none;">City</span><input type="text" name="city" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> State:</strong></td>
<td><label><span style="display: none;">State</span><input type="text" name="state" size="2" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Zip:</strong></td>
<td><label><span style="display: none;">Zip</span><input type="text" name="zip" size="4" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Daytime Phone:</strong></td>
<td><label><span style="display: none;">Daytime Phone</span><input type="text" name="dayphone" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Email Address:</strong></td>
<td><label><span style="display: none;">Email Address</span><input type="text" name="email" size="30" /></label></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submitButtonName" value="Submit Order" style="background-color: #012e63; color: white;" id="mysubmit"/></td>
</tr>
</table>
</form>

这是我的 javascript，用于检查必填字段。

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("firstname", "lastname", "address1", "city", "state", "zip", "dayphone", "email");
// Enter field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Street Address", "City", "State", "Zip", "Daytime Phone", "Email Address");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
    var obj = formobj.elements[fieldRequired[i]];
    if (obj){
        switch(obj.type){
        case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
        case "select-multiple":
            if (obj.selectedIndex == -1){
                alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
        case "text":
        case "textarea":
            if (obj.value == "" || obj.value == null){
                alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
        default:
        }
        if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
                if (obj[j].checked){
                    blnchecked = true;
                }
            }
            if (!blnchecked){
                alertMsg += " - " + fieldDescription[i] + "\n";
            }
        }
    }
}

if (alertMsg.length == l_Msg){
    return true;

}else{

    alert(alertMsg);

    return false;



}
}

现在这工作正常，问题是当我尝试添加 javascript 以在我的字段被检查为必填后禁用提交按钮。

我找到了一个禁用提交按钮的脚本，但是当我尝试 "combine" 这两个 javascript 来实现我需要的功能时，我无法让它工作。

这是禁用提交按钮的代码。

如何使用我已经在使用的 javascript 进行这项工作？

functionformCheck(formobj){
varmsg='';

if(msg!=''){alert(msg);}
else{
document.getElementById('mysubmit').value='Submitting,pleasewait...';
document.getElementById('mysubmit').disabled=true;
formobj.submit();
}
returnfalse;//Returnfalsepreventsitfrom
//submittingintheeventoferror
}

感谢您的帮助，谢谢。

Answer 1

我是这样实现的。

<script type="text/javascript">

var submitting = false;

function checkForm(form)
{
    if(form.firstname.value == "") {
        alert("Please enter First Name");
        form.firstname.focus();
        return false;
    }
    if(form.lastname.value == "") {
        alert("Please enter Last Name");
        form.lastname.focus();
        return false;
    }
 if(form.address1.value == "") {
        alert("Please enter Street Address");
        form.lastname.focus();
        return false;
    } 
 if(form.city.value == "") {
        alert("Please enter City");
        form.lastname.focus();
        return false;
    }    
 if(form.state.value == "") {
        alert("Please enter State");
        form.lastname.focus();
        return false;
    }     
 if(form.zip.value == "") {
        alert("Please enter Zip");
        form.lastname.focus();
        return false;
    } 
 if(form.dayphone.value == "") {
        alert("Please enter Daytime Phone");
        form.lastname.focus();
        return false;
    } 
 if(form.email.value == "") {
        alert("Please enter Email Address");
        form.lastname.focus();
        return false;
    } 

    return true;
}

function resetForm(form)
{
    form.myButton.disabled = false;
    form.myButton.value = "Submit";
    submitting = false;
}

</script>

<form action="mail.php" method="post" onsubmit="
if(submitting) {
    alert('The form is being submitted, please wait a moment...');
    myButton.disabled = true;
    return false;
}
if(checkForm(this)) {
    myButton.value = 'Submitting form...';
    submitting = true;
    return true;
}
return false;">
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><strong>Company Name:</strong></td>
<td><label><span style="display: none;">Company Name</span><input type="text" name="companyname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> First Name:</strong></td>
<td><label><span style="display: none;">First Name</span><input type="text" name="firstname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Last Name:</strong></td>
<td><label><span style="display: none;">Last Name</span><input type="text" name="lastname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Street Address:</strong></td>
<td><label><span style="display: none;">Street Address</span><input type="text" name="address1" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong>Suite/Apt:</strong></td>
<td><label><span style="display: none;">Suite/Apt</span><input type="text" name="address2" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> City:</strong></td>
<td><label><span style="display: none;">City</span><input type="text" name="city" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> State:</strong></td>
<td><label><span style="display: none;">State</span><input type="text" name="state" size="2" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Zip:</strong></td>
<td><label><span style="display: none;">Zip</span><input type="text" name="zip" size="4" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Daytime Phone:</strong></td>
<td><label><span style="display: none;">Daytime Phone</span><input type="text" name="dayphone" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Email Address:</strong></td>
<td><label><span style="display: none;">Email Address</span><input type="text" name="email" size="30" /></label></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="myButton" value="Submit Order" style="background-color: #012e63; color: white;" id="myButton"/></td>
</tr>
</table>
</form>

结合验证 Javascript 和禁用提交按钮 Javascript 以防止提交多个表单

Combine Validation Javascript with Disable Submit Button Javascript to prevent multiple form submissions

html

javascript

forms

disabled-control

required