title: How to enable and disable a submit button based on if passwords are matching?
body: <p>I am creating a form where the user will register for a website and in that form there are two input fields to help confirm the users password. I am trying to disable the submit button when the passwords are not matching and then reenable it when the passwords do match. I currently have the disable part working but I cannot reenable it.</p>
  
  <p>I have tried looking at this post <a href="https://stackoverflow.com/questions/21727317/how-to-check-confirm-password-field-in-form-without-reloading-page">how to check confirm password field in form without reloading page</a> but I couldn't figure out what I needed to do beyond what I currently have.</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="myform" action="process_registration.php" class="basic-grey" method="post"&gt;
    &lt;div&gt;
      &lt;label for="firstName" id="firstName"&gt;* First Name:&lt;/label&gt;
      &lt;input type="text" name="firstName" id="firstName" minlength=1 required /&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="lastName" id="lastName"&gt;* Last Name:&lt;/label&gt;
      &lt;input type="text" name="lastName" id="lastName" minlength=1 required /&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="email" id="email"&gt;* Email:&lt;/label&gt;
      &lt;input type="email" name="email" id="email" minlength=1 required /&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="username" id="usernameLabel"&gt;* Username:&lt;/label&gt;
      &lt;input type="text" name="username" id="username" minlength=1 required /&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="password" id="passwordLabel"&gt;* Password:&lt;/label&gt;
      &lt;input type="password" name="password" id="password" minlength=1 required /&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="passwordConfirm" id="passwordLabelConfirm"&gt;* Password Confirmation:&lt;/label&gt;
      &lt;input type="password" name="passwordConfirm" id="passwordConfirm" minlength=1 required /&gt;
      &lt;span id="message"&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;input id="submit" type="submit" name="submit" value="Submit" /&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;?php include ABSOLUTE_PATH . '_includes/footer.inc.php'; ?&gt;
  
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'&gt;
  &lt;/script&gt;
  &lt;script src='https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js'&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    $('form').validate();
  &lt;/script&gt;
  
  &lt;script&gt;
    $('#password, #passwordConfirm').on('keyup', function() {
      if ($('#password').val() == $('#passwordConfirm').val()) {
        $('#message').html('Matching').css('color', 'green');
        $('submit').prop('disabled', false);
      } else
        $('#message').html('Not Matching').css('color', 'red');
      $('submit').prop('disabled', true);
    });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>