jQuery disable enable submit button

Question

I have this HTML    lt input type  text  name  textField    gt   lt input type  submit  value  send    gt    How can I do something like this    When the text field is empty the submit should be disabled  disabled  disabled    When something is typed in the text field to remove the disabled attribute  If the text field becomes empty again the text is deleted  the submit button should be disabled again    I tried something like this     document  ready function           input type  submit     attr  disabled   disabled           input type  text     change function            if   this  val                        input type  submit     removeAttr  disabled                               but it doesn t work  Any ideas

User · Answer

This question is 2 years old but it s still a good question and it was the first Google result     but all of the existing answers recommend setting and removing the HTML attribute  removeAttr  disabled     disabled   which is not the right approach  There is a lot of confusion regarding attribute vs  property   HTML  The  disabled  in  lt input type  button  disabled gt  in the markup is called a boolean attribute by the W3C   HTML vs  DOM  Quote      A property is in the DOM  an attribute is in the HTML that is parsed into the DOM    https   stackoverflow com a 7572855 664132  JQuery  Related      Nevertheless  the most important concept to remember about the checked attribute is that it does not correspond to the checked property  The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox  The checked attribute value does not change with the state of the checkbox  while the checked property does  Therefore  the cross-browser-compatible way to determine if a checkbox is checked is to use the property      Relevant      Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute  Examples include the value property of input elements  the disabled property of inputs and buttons  or the checked property of a checkbox  The  prop   method should be used to set disabled and checked instead of the  attr   method        input    prop   disabled   false      Summary  To       change DOM properties such as the       disabled state of form elements  use the  prop   method    http   api jquery com attr      As for the disable on change part of the question  There is an event called  input   but browser support is limited and it s not a jQuery event  so jQuery won t make it work  The change event works reliably  but is fired when the element loses focus  So one might combine the two  some people also listen for keyup and paste    Here s an untested piece of code to show what I mean     document  ready function         var  submit      input type  submit           submit prop  disabled   true          input type  text     on  input change   function        input change keyup paste           submit prop  disabled      this  val   length

User · Answer

To remove disabled attribute use        elementID   removeAttr  disabled      and to add disabled attribute use       elementID   prop  disabled   true     Enjoy

User · Answer

Please see the below code to enable or disable Submit button     If Name and City fields has value then only Submit button will be enabled     x000D   x000D   lt script gt  x000D      document  ready function     x000D          input type  submit     prop  disabled   true   x000D   x000D          Name   keyup function     x000D        ToggleButton    x000D          x000D          City   keyup function     x000D        ToggleButton    x000D          x000D   x000D        x000D   x000D  function ToggleButton     x000D    if       Name   val           amp  amp       City   val             x000D          input type  submit     prop  disabled   false   x000D      return true  x000D      else   x000D          input type  submit     prop  disabled   true   x000D      return false  x000D      x000D     lt  script gt  x000D   lt form method  post  gt  x000D   x000D     lt div class  row  gt  x000D       lt div class  col-md-4  gt  x000D         lt h2 gt Getting started lt  h2 gt  x000D         lt fieldset gt  x000D           lt label class  control-label text-danger  gt Name lt  label gt  x000D           lt input type  text  id  Name  name  Name  class  form-control    gt  x000D           lt label class  control-label  gt Address lt  label gt  x000D           lt input type  text  id  Address  name  Address  class  form-control    gt  x000D           lt label class  control-label text-danger  gt City lt  label gt  x000D           lt input type  text  id  City  name  City  class  form-control    gt  x000D           lt label class  control-label  gt Pin lt  label gt  x000D           lt input type  text  id  Pin  name  Pin  class  form-control    gt  x000D           lt input type  submit  value  send  class  btn btn-success    gt  x000D         lt  fieldset gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Here s the solution for file input field   To disable a submit button for file field when a file is not chosen  then enable after the user chooses a file to upload      document  ready function            submitButtonId   attr  disabled    disabled            fileFieldId   change function                submitButtonId   removeAttr  disabled                  Html    lt    form tag your method path   multipart   gt  true do   gt  lt    file field tag  file   accept   gt   text csv    id   gt   fileFieldId    gt  lt    submit tag  Upload    id   gt   submitButtonId    gt  lt   end   gt

User · Answer

It will work like this      input type  email     keyup function         if    this  val                        button type  submit     prop  disabled   false         else               button type  submit     prop  disabled   true               Make sure there is an  disabled  attribute in your HTML

User · Answer

take look at this snippet from my project      input type  submit       letter-form   on  click           function e                 e preventDefault        post     letter-form   attr  action        letter-form   serialize                     function response      your response from form submit                     if  response result      Redirect                             window location   response url                        else                           Message response saveChangesResult  response operation  response data                               this  attr  disabled    disabled      this is what you want      so just disabled the button after your operation executed      this  attr  disabled    disabled

User · Answer

I had to work a bit to make this fit my use case   I have a form where all fields must have a value before submitting   Here s what I did       document  ready function                form id button type  submit     prop  disabled   true               form id input   form id select   keyup function               var disable   false                 form id input   form id select   each function                 if   this  val            disable   true                                 form id button type  submit     prop  disabled   disable                      Thanks to everyone for their answers here

User · Answer

I Hope below code will help someone            jQuery document  ready function         jQuery  input type submit    prop  disabled   true        jQuery  input name textField    focusin function            jQuery  input type submit    prop  disabled   false                jQuery  input name textField    focusout function            var checkvalue   jQuery this  val            if checkvalue                   jQuery  input type submit    prop  disabled   false                     else              jQuery  input type submit    prop  disabled   true                            DOC END

User · Answer

or for us that dont like to use jQ for every little thing   document getElementById  submitButtonId   disabled   true

User · Answer

you can also use something like this       document  ready function            input type  submit     attr  disabled   true          input type  text     on  keyup  function             if   this  val                           input type  submit     attr  disabled    false            else                 input type  submit     attr  disabled    true                           here  is Live example

User · Answer

We can simply have if  amp  else  if suppose your input is empty we can have  if    name  val                  input type  submit     attr  disabled    false       else we can change false into true

User · Answer

The problem is that the change event fires only when focus is moved away from the input  e g  someone clicks off the input or tabs out of it    Try using keyup instead     document  ready function              input type  submit     prop  disabled   true           input type  text     keyup function             if   this  val                           input type  submit     prop  disabled   false

User · Answer

eric  your code did not seem to work for me when the user enters text then deletes all the text  i created another version if anyone experienced the same problem  here ya go folks      input type  submit     attr  disabled   disabled       input type  text     keyup function        if    input type  text     val                      input type  submit     attr  disabled   disabled              else             input type  submit     removeAttr  disabled

User · Answer

Try   x000D   x000D  let check   inp  gt  inp nextElementSibling disabled    inp value  x000D   lt input type  text  name  textField  oninput  check this    gt  x000D   lt input type  submit  value  send  disabled   gt  x000D   x000D   x000D

User · Answer

Disable     input type  submit     prop  disabled   true    Enable     input type  submit     removeAttr  disabled     The above enable code is more accurate than         input type  submit     removeAttr  disabled      You can use both methods

User · Answer

For form login    lt form method  post  action   login  gt       lt input type  text  id  email  name  email  size  35  maxlength  40  placeholder  Email    gt       lt input type  password  id  password  name  password  size  15  maxlength  20  placeholder  Password   gt       lt input type  submit  id  send  value  Send  gt   lt  form gt    Javascript     document  ready function                 send   prop  disabled   true            email   password   keyup function             if      password   val          amp  amp      email   val                                    send   prop  disabled   false                     else                           send   prop  disabled   true

User · Answer

Vanilla JS Solution  It works for a whole form not only one input    In question selected JavaScript tag   HTML Form    x000D   x000D  var form   document querySelector  form   x000D      var inputs   form querySelectorAll  input   x000D      var required inputs   form querySelectorAll  input required    x000D      var register   document querySelector  input type  submit     x000D      form addEventListener  keyup   function e    x000D          var disabled   false x000D          inputs forEach function input  index    x000D              if  input value            input value replace   s g      length    x000D                  disabled   true x000D                x000D             x000D          if  disabled    x000D              register setAttribute  disabled    disabled   x000D            else   x000D              register removeAttribute  disabled   x000D            x000D         x000D   lt form action   signup  gt  x000D           lt div gt  x000D               lt label for  username  gt User Name lt  label gt  x000D               lt input type  text  name  username  required  gt  x000D           lt  div gt  x000D           lt div gt  x000D               lt label for  password  gt Password lt  label gt  x000D               lt input type  password  name  password    gt  x000D           lt  div gt  x000D           lt div gt  x000D               lt label for  r password  gt Retype Password lt  label gt  x000D               lt input type  password  name  r password    gt  x000D           lt  div gt  x000D           lt div gt  x000D               lt label for  email  gt Email lt  label gt  x000D               lt input type  text  name  email    gt  x000D           lt  div gt  x000D           lt input type  submit  value  Signup  disabled  disabled    gt  x000D       lt  form gt  x000D   x000D   x000D    Some explanation   In this code we add keyup event on html form and on every keypress check all input fields  If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button   If you need to disable submit button until all required input fields are filled in - replace   inputs forEach function input  index      with   required inputs forEach function input  index      where required inputs is already declared array containing only required input fields

User · Answer

function           text   keypress check submit  each function         check submit               function check submit       if    this  val   length    0            submit   attr  disabled   true       else           submit   removeAttr  disabled

User · Answer

Al types of solution are supplied  So I want to try for a different solution  Simply it will be more easy if you add a id attribute in your input fields     lt input type  text  name  textField  id  textField   gt   lt input type  submit  value  send  id  submitYesNo   gt    Now here is your jQuery      textField   change function      if     textField   val                submitYesNo   prop  disabled   true    else         submitYesNo   prop  disabled   false

User · Answer

The answers above don t address also checking for menu based cut paste events   Below s the code that I use to do both   Note the action actually happens with a timeout because the cut and past events actually fire before the change happened  so timeout gives a little time for that to happen        your-input-item    bind  keyup cut paste  function         var ctl     this       setTimeout function                 your-submit-button   prop   disabled     ctl  val                  100

User · Answer

If the button is itself a jQuery styled button  with  button    you will need to refresh the state of the button so that the correct classes are added   removed once you have removed added the disabled attribute        selector    button   refresh

[javascript] jQuery disable/enable submit button

HTML

HTML vs. DOM

JQuery

Summary

Examples related to javascript

Examples related to html

Examples related to jquery