If input field is empty disable submit button

Question

I m trying to disable submit button if the user hasn t provided any text    At first sight it looks that everything works just fine  but if user types some text  then deletes it  the submit button becomes enabled    Here is my code     document  ready function            sendButton   attr  disabled  true           message   keyup function            if   this  val length   0                   sendButton   attr  disabled   false

User · Answer

Please try this   lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Jquery lt  title gt       lt meta charset  utf-8  gt              lt script src  http   code jquery com jquery-1 7 1 min js  gt  lt  script gt     lt  head gt      lt body gt        lt input type  text  id  message  value      gt       lt input type  button  id  sendButton  value  Send  gt        lt script gt        document  ready function             var checkField           checking the length of the value of message and assigning to a variable checkField  on load       checkField      input message   val   length           var enableDisableButton   function                     if checkField  gt  0                 sendButton   removeAttr  disabled                       else                 sendButton   attr  disabled   disabled                                       calling enableDisableButton   function on load       enableDisableButton                          input message   keyup function               checking the length of the value of message and assigning to the variable checkField  on keyup         checkField      input message   val   length            calling enableDisableButton   function on keyup         enableDisableButton                           lt  script gt     lt  body gt   lt  html gt

User · Answer

Try this code    document  ready function            sendButton   attr  disabled  true            message   keyup function            if   this  val   length   0                   sendButton   attr  disabled   false                     else                           sendButton   attr  disabled   true                                  Check demo Fiddle  You are missing the else part of the if statement  to disable the button again if textbox is empty  and parentheses    after val function in  if   this  val length   0

User · Answer

For those that use coffeescript  I ve put the code we use globally to disable the submit buttons on our most widely used form  An adaption of Adil s answer above        new post button   prop  disabled   true     new post  post message   keyup - gt          new post button   prop  disabled   if  value       then true else false     return

User · Answer

You are disabling only on document ready and this happens only once when DOM is ready but you need to disable in keyup event too when textbox gets empty  Also change   this  val length to   this  val   length    document  ready function            sendButton   attr  disabled  true           message   keyup function            if   this  val   length   0                  sendButton   attr  disabled   false                       else                 sendButton   attr  disabled  true                Or you can use conditional operator instead of if statement  also use prop instead of attr as attribute is not recommended by jQuery 1 6 and above for disabled  checked etc      As of jQuery 1 6  the  attr   method returns undefined for attributes   that have not been set  To retrieve and change DOM properties such as   the checked  selected  or disabled state of form elements  use the    prop   method  jQuery docs     document  ready function            sendButton   prop  disabled  true           message   keyup function                sendButton   prop  disabled   this value         true   false

User · Answer

An easy way to do   function toggleButton ref bttnID       document getElementById bttnID  disabled    ref value     ref defaultValue    false   true        lt input     onkeyup  toggleButton this  bttnsubmit     gt   lt input     disabled  disabled  id  bttnsubmit       gt

[jquery] If input field is empty, disable submit button

Examples related to jquery

Examples related to forms