Disabling submit button until all fields have values

Question

I want to disable my submit button until all the fields have values   how can I do that    lt html gt       lt head gt           lt title gt  lt  title gt           lt style type  text css  gt           lt  style gt           lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 5 2 jquery min js  gt  lt  script gt           lt script type  text javascript  gt            document  ready function                     register   attr  disabled   true                        lt  script gt       lt  head gt       lt body gt           lt form gt          Username lt br   gt           lt input type  text  id  user input  name  username    gt  lt br   gt          Password lt br   gt           lt input type  text  id  pass input  name  password    gt  lt br   gt          Confirm Password lt br   gt           lt input type  text  id  v pass input  name  v password    gt  lt br   gt          Email lt br   gt           lt input type  text  id  email  name  email    gt  lt br   gt                lt input type  submit  id  register  value  Register    gt           lt  form gt           lt div id  test  gt           lt  div gt       lt  body gt   lt  html gt

User · Accepted Answer

Check out this jsfiddle   HTML     note the change    I set the disabled property right away  lt input type  submit  id  register  value  Register  disabled  disabled    gt    JavaScript   function            form  gt  input   keyup function              var empty   false             form  gt  input   each function                 if    this  val                            empty   true                                     if  empty                    register   attr  disabled    disabled       updated according to http   stackoverflow com questions 7637790 how-to-remove-disabled-attribute-with-jquery-ie           else                   register   removeAttr  disabled       updated according to http   stackoverflow com questions 7637790 how-to-remove-disabled-attribute-with-jquery-ie                          The nice thing about this is that it doesn t matter how many input fields you have in your form  it will always keep the button disabled if there is at least 1 that is empty  It also checks emptiness on the  keyup   which I think makes it more convenient for usability

User · Answer

Built upon rsplak s answer  It uses jQuery s newer  on   instead of the deprecated  bind    In addition to input  it will also work for select and other html elements  It will also disable the submit button if one of the fields becomes blank again   var fields     user input   pass input   v pass input   email      fields  on  change   function         if  allFilled                  register   removeAttr  disabled          else               register   attr  disabled    disabled               function allFilled         var filled   true        fields  each function             if    this  val                        filled   false                        return filled      Demo  JSFiddle

User · Answer

Grave digging    I like a different approach   elem      form   elem on  keyup   input   checkStatus  elem on  change    select   checkStatus   checkStatus    e    gt    elems      form   find  input enabled   not  input type hidden    map - gt    this  val      filled     grep elems   n  - gt  n    bool   elems size        filled  size        input submit   attr  disabled   bool

User · Answer

I refactored the chosen answer here and improved on it  The chosen answer only works assuming you have one form per page  I solved this for multiple forms on same page  in my case I have 2 modals on same page  and my solution only checks for values on required fields  My solution gracefully degrades if JavaScript is disabled and includes a slick CSS button fade transition   See working JS fiddle example  https   jsfiddle net bno08c44 4   JS    function     function submitState el         var  form     el            requiredInputs    form find  input required             submit    form find  input type  submit            submit attr  disabled    disabled          requiredInputs keyup function              form data  empty    false            requiredInputs each function             if    this  val                        form data  empty    true                               if   form data  empty        true              submit attr  disabled    disabled   attr  title    fill in all required fields            else            submit removeAttr  disabled   attr  title    click to submit                              apply to each form element individually   submitState   sign up user      submitState   login user          CSS  input type  submit       background   5cb85c    color   fff    transition  background 600ms    cursor  pointer     input type  submit   disabled     background   555    cursor  not-allowed      HTML   lt h4 gt Sign Up lt  h4 gt   lt form id  sign up user  data-empty    action     method  post  gt    lt input type  email  name  email  placeholder  Email  required gt    lt input type  password  name  password  placeholder  Password  required gt    lt input type  password  name  password confirmation  placeholder  Password Confirmation  required gt    lt input type  hidden  name  secret  value  secret  gt    lt input type  submit  value  signup  gt   lt  form gt    lt h4 gt Login lt  h4 gt   lt form id  login user  data-empty    action     method  post  gt    lt input type  email  name  email  placeholder  Email  required gt    lt input type  password  name  password  placeholder  Password  required gt    lt input type  checkbox  name  remember  value  1  gt  remember me   lt input type  submit  value  signup  gt   lt  form gt

User · Answer

user input   pass input   v pass input   email   bind  keyup   function         if allFilled        register   removeAttr  disabled         function allFilled         var filled   true         body input   each function             if   this  val          filled   false              return filled      JSFiddle with your code  works

User · Answer

DEMO  http   jsfiddle net kF2uK 2   function buttonState           input   each function                register   attr  disabled    disabled            if   this  val           return false              register   attr  disabled                    function            register   attr  disabled    disabled           input   change buttonState

User · Answer

For all solutions instead of   keyup    change  should be used or else the submit button wont be disabled when someone just selects data stored in cookies for any of the text fields

User · Answer

This works well since all the inputs have to meet the condition of not null     function              submits   attr  disabled   true           input 5   change function              if      input 1   val          amp  amp      input 2   val          amp  amp      input 3   val          amp  amp      input 4   val          amp  amp      input 5   val                            submit   attr  disabled   false             else                   submit   attr  disabled   true

User · Answer

All variables are cached so the loop and keyup event doesn t have to create a jQuery object everytime it runs    var  input      input text         register       register         register attr  disabled   true     input keyup function         var trigger   false       input each function             if     this  val                  trigger   true                        trigger    register attr  disabled   true     register removeAttr  disabled          Check working example at http   jsfiddle net DKNhx 3

[jquery] Disabling submit button until all fields have values

HTML

JavaScript

Examples related to jquery