Input: Disable Submit

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

Example:

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

 <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

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

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

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

Subscribes To Comments Post Rss or Leave A Trackback To This Post

Viagra said,

March 6th, 2009 at 12:54 am

Nice Site. Thanks.

alex said,

February 9th, 2010 at 9:21 pm

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,

January 4th, 2011 at 10:07 am

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,

May 16th, 2011 at 1:56 am

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