Disable Enable Submit Button until all forms have been filled

Question

I want my form submit button to be disabled enabled depending on if the form is completely filled   When the inputs are filled  the disabled button changes to enabled  That works great  But I would like it to disable the button when an input gets emtied   This is my script    lt script type  text javascript  language  javascript  gt      function checkform                 var f   document forms  theform   elements          var cansubmit   true           for  var i   0  i  lt  f length  i                  if  f i  value length    0  cansubmit   false                     if  cansubmit                document getElementById  submitbutton   disabled   false                   lt  script gt    lt form name  theform  gt   lt input type  text  onKeyup  checkform      gt   lt input type  text  onKeyup  checkform      gt   lt input id  submitbutton  type  submit  disabled  disabled  value  Submit    gt   lt  form gt

User · Answer

lt form name  theform  gt       lt input type  text    gt       lt input type  text    gt  enter code here       lt input id  submitbutton  type  submit disabled  disabled  value  Submit   gt   lt  form gt    lt script type  text javascript  language  javascript  gt       let txt   document querySelectorAll   type  text          for  let i   0  i  lt  txt length  i              txt i  oninput        gt                if    txt 0  value         amp  amp    txt 1  value                           submitbutton removeAttribute  disabled                                  lt  script gt

User · Answer

Just add an else then   function checkform         var f   document forms  theform   elements      var cansubmit   true       for  var i   0  i  lt  f length  i              if  f i  value length    0  cansubmit   false             if  cansubmit            document getElementById  submitbutton   disabled   false            else           document getElementById  submitbutton   disabled    disabled

User · Answer

Here is my way of validating a form with a disabled button  Check out the snippet below    x000D   x000D  var inp   document getElementsByTagName  input    x000D  var btn   document getElementById  btn    x000D     Disable the button dynamically using javascript x000D  btn disabled    disabled   x000D   x000D  function checkForm     x000D      for  var i   0  i  lt  inp length  i      x000D          if  inp i  checkValidity      false    x000D              btn disabled    disabled   x000D            else   x000D              btn disabled   false  x000D            x000D        x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8   gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1 0   gt  x000D       lt title gt JavaScript lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt h1 gt Javascript form validation lt  h1 gt  x000D   lt p gt Javascript constraint form validation example  lt  p gt  x000D   x000D   lt form onkeyup  checkForm    autocomplete  off  novalidate gt  x000D       lt input type  text  name  fname  placeholder  First Name  required gt  lt br gt  lt br gt  x000D       lt input type  text  name  lname  placeholder  Last Name  required gt  lt br gt  lt br gt  x000D       lt button type  submit  id  btn  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D      Example explained    We create a variable to store all the input elements   var inp   document getElementsByTagName  input     We create another variable to store the button element  var btn   document getElementById  btn     We loop over the collection of input elements  for  var i   0  i  lt  inp length  i             Code    Finally  We use the checkValidity   method to check if the input elements   with a required attribute  are valid or not  Code is inserted inside the  for loop   If it is invalid  then the button will remain disabled  else the  attribute is removed   for  var i   0  i  lt  inp length  i          if  inp i  checkValidity      false            btn disabled    disabled         else           btn disabled   false

User · Answer

Here is the code   lt html gt      lt body gt         lt input type  text  name  name  id  name  required  required                                     aria-required  true  pattern   a-z  1 5   onchange  func    gt         lt script gt         function func                    var namdata document form1 name value           if namdata match   a-z  1 5                        document getElementById  but1   disabled false                               lt  script gt     lt  body gt   lt  html gt    Using Javascript

User · Answer

Put it inside a table and then do on her   var tabPom   document getElementById  tabPomId      tabPom   prop  disabled   true false

User · Answer

I think this will be much simpler for beginners in JavaScript         The function checks if the password and confirm password match        Then disables the submit button for mismatch but enables if they match             function checkPass                                   Store the password field objects into variables                     var pass1   document getElementById  register-password                    var pass2   document getElementById  confirm-password                      Store the Confimation Message Object                     var message   document getElementById  confirmMessage                      Set the colors we will be using                     var goodColor     66cc66                   var badColor     ff6666                     Compare the values in the password field                    and the confirmation field                 if pass1 value    pass2 value                         The passwords match                         Set the color to the good color and inform                       the user that they have entered the correct password                      pass2 style backgroundColor   goodColor                      message style color   goodColor                      message innerHTML    Passwords Match      Enables the submit button when there s no mismatch                                        var tabPom   document getElementById  btnSignUp                          tabPom   prop  disabled   false                    else                        The passwords do not match                        Set the color to the bad color and                       notify the user                      pass2 style backgroundColor   badColor                      message style color   badColor                      message innerHTML    Passwords Do Not Match      Disables the submit button when there s mismatch                            var tabPom   document getElementById  btnSignUp                          tabPom   prop  disabled   true

User · Answer

I just posted this on Disable Submit button until Input fields filled in   Works for me   Use the form onsubmit   Nice and clean   You don t have to worry about the change and keypress events firing   Don t have to worry about keyup and focus issues   http   www w3schools com jsref event form onsubmit asp   lt form action  formpost php  method  POST  onsubmit  return validateCreditCardForm    gt          lt  form gt   function validateCreditCardForm        var result   false      if       billing-cc-exp   val   length  gt  0   amp  amp               billing-cvv   val   length   gt  0   amp  amp               billing-cc-number   val   length  gt  0                 result   true            return result

User · Answer

You can enable and disable the submit button based on the javascript validation below is the validation code  Working Example Here   lt script gt  function validate      var valid   true  valid   checkEmpty     name     valid   valid  amp  amp  checkEmail     email          san-button   attr  disabled  true   if valid        san-button   attr  disabled  false        function checkEmpty obj    var name     obj  attr  name          name  -validation   html         obj  css  border       if   obj  val              obj  css  border    FF0000 1px solid          name  -validation   html  Required    return false     return true     function checkEmail obj    var result   true   var name     obj  attr  name          name  -validation   html         obj  css  border        result   checkEmpty obj    if  result      obj  css  border    FF0000 1px solid          name  -validation   html  Required    return false     var email regex       a-zA-Z0-9   -        a-zA-Z0-9-         a-zA-Z0-9  2 3       result   email regex test   obj  val      if  result      obj  css  border    FF0000 1px solid          name  -validation   html  Invalid    return false     return result      lt  script gt

User · Answer

Just use  document getElementById  submitbutton   disabled    cansubmit    instead of the the if-clause that works only one-way   Also  for the users who have JS disabled  I d suggest to set the initial disabled by JS only  To do so  just move the script behind the  lt form gt  and call checkform    once

[javascript] Disable/Enable Submit Button until all forms have been filled

Examples related to javascript

Examples related to forms

Examples related to submit

Examples related to disabled-control