Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I have a basic form that is getting multiple form submissions, so I wanted to disable the submit button after the form was checked for all required fields in order to prevent that.

Here is my form code.

<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>

Here is my javascript that checks for the required fields.

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;



}
}

Now this works fine, the problem is when I try to add in javascript to disable the submit button after my fields are checked to be required.

I have found a script that does disable the submit button, but when I try to "combine" the two javascripts to achieve what I need, I can't get it to work.

Here is the code that disables the submit button.

How do I make this work with the javascript that I am already using?

functionformCheck(formobj){
varmsg='';

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

Your help is appreciated, thank you.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

I was able to to achieve it this way.

<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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.