Input: Disable Submit

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.

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>
 
 

5 Users Responded in " Input: Disable Submit "

Viagra said,  

Nice Site. Thanks.

alex said,  

One problem, after entering all values have to click else where to enable submit, want to make this enable after the last field is not empty

Morgan said,  

Thanks for this great tutorial!

I’m having the same problem as Alex: The submit button doesn’t become active until *after* focus is removed from the last required field, either by clicking elsewhere on the page or tabbing away from the field. Any way to make the button active as soon as any information is entered into the field?

Thanks!

sunshine said,  

i am facing two issues, one is same as mentioned by other ppl that to make the button active have to click else where

and second is that on clicking the button nothing happens, like i want to postthe values to another page but on clicking the button nothing is happening

Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: All comments maybe under going moderation so there is no need to resubmit the comments. it will appeared when admin approved it, feel free to subscribes to the post comments rss to stay update