Объедините проверочный Javascript с Javascript кнопки отключения отправки, чтобы предотвратить отправку нескольких форм

У меня есть базовая форма, которая получает несколько форм, поэтому я хотел отключить кнопку отправки после того, как форма была проверена для всех необходимых полей, чтобы предотвратить это.

Вот мой код формы.

<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, чтобы отключить кнопку отправки после того, как мои поля проверены как обязательные.

Я нашел сценарий, который отключает кнопку отправки, но когда я пытаюсь «объединить» два сценария 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
}

Ваша помощь ценится, спасибо.


person Community    schedule 01.05.2015    source источник


Ответы (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>
person Community    schedule 01.05.2015