Heres some JavaScript that will disable a form’s submit button, until the user has filled out all required fields.

Example:

First name:
Last name:

 

Pretty neat.

Now here is the code. You’ll want to put these JavaScript functions between your <HEAD> </HEAD> tags on the page you will be using it on.
Like this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

 <HEAD>
<script type="text/javascript">
var submitted = 0;
 
function LockButton (form,element) {
    if ( ! submitted ) {
        form.elements[element].disabled=true;
        submitted = 1;
        form.submit;
        }
}
 
 //Clears the form and disables the submit button
function ResetButton(form,element) {
    form.elements[element].disabled=true;
    document.getElementById('fname').value='';
    document.getElementById('lname').value='';
}
 
function validate(form,element) {
	//If first name is not filled out, keep submit disabled 
    if (form.fname.value == '') {
        form.elements[element].disabled=true;
        return false;
    }
    //If last name is not filled out, keep submit disabled
    else if (form.lname.value == '') {
        form.elements[element].disabled=true;
        return false;
    }
        //If everything is filled out, enable Submit
        else {
            form.elements[element].disabled=false;
            return true;
        }
}
</script>
</HEAD>

 

Interesting, but what about the form?

The form will come, but first we must customize these functions. If you havn’t noticed above, you have 2 places you need to change, in order to match your form. For this example I have the fields fname and lname.

In our ResetButton function we need to add all fields in our form, that we want to clear when the Reset button is pressed:

?View Code JAVASCRIPT
1
2
3
4
5
6

  //Clears the form and disables the submit button
function ResetButton(form,element) {
    form.elements[element].disabled=true;
    document.getElementById('fname').value='';
    document.getElementById('lname').value='';
}

Now, we need to customize our validate function, like this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

 //If first name is not filled out, keep submit disabled 
    if (form.fname.value == '') {
        form.elements[element].disabled=true;
        return false;
    }
    //If last name is not filled out, keep submit disabled
    else if (form.lname.value == '') {
        form.elements[element].disabled=true;
        return false;
    }

Notice where you see fname and lname. You will need to add a new else if block for each additional field you would like to make required.

 

Now to our form!?

Yes. I’m going to assume that from my example form here you will see what needs to be added to your form fields to make our script work. Side note: You do not need to have a reset button, but may be useful for some.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <form id="form1" name="form1" action="#" method="POST">
      <table border="0" cellpadding="0" cellspacing="0">
          <tr>
              <td width="70">First name:</td>
              <td><input id="fname" name="fname" type="text" class="mystyle" onChange="validate(this.form,'Submit')"><br></td>
          </tr>
          <tr>
              <td width="70">Last name:</td>
              <td><input id="lname" name="lname" type="text" class="mystyle" onChange="validate(this.form,'Submit')"><br></td>
          </tr>
          <tr>
          <td colspan="2" align="right">
		  <input id="Submit" type="button" name="Submit" value="Submit" disabled onClick="validate(this.form,'Submit'); LockButton(this.form,'Submit');" /><br />
		  <input type="button" name="Reset" value="Reset" onClick="ResetButton(this.form,'Submit');" /></td>
          </tr>
      </table>
   </form>