javascriptbootstrap-modalsubmitdisabled-input

Disable submit button when password not match and enable when matched in bootstrap modal


I have a bootstrap modal form for sign up. I want my submit button to be disabled before my password and re-type password are matched. Matched meaning it has to be some input and not empty.

The button should be enabled when matched and disabled again when both fields unmatched again.

I have tried almost all solutions on google and am still stuck for two days.

Here is my form HTML:

<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>

<div class="form-group">
<a href="signup.php" style="text-decoration: none;"><button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button></a>
</div>

Here is my script:

    if (document.getElementById('signupModalPassword').value ==
    document.getElementById('signupModalPwCheck').value) {
        document.getElementById('signupbtn').disabled = false;
    } else {
        document.getElementById('signupbtn').disabled = true;
    }

    if(document.getElementById('signupModalPassword').value == 0) {
       document.getElementById('signupbtn').disabled = true;
    } else {

        document.getElementById("signupbtn").disabled = false;
}

Please forgive my messy code as I'm very new to coding.

I'll be so grateful if you could help.


Solution

  • example of code:

    // validate on first render
    check();
    
    function check() {
      const signupModalPassword = document.getElementById('signupModalPassword');
      const signupModalPwCheck = document.getElementById('signupModalPwCheck');
    
      if (signupModalPassword.value && signupModalPwCheck.value
          && signupModalPassword.value === signupModalPwCheck.value) {
        document.getElementById('signupbtn').disabled = false;
      }
      else {
        document.getElementById('signupbtn').disabled = true;
      }
     }
        
    <label for="signupModalPassword">Password</label>
    <input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
    <p></p>
    <label for="signupModalPwCheck">Re-type Password</label>
    <input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
    <span id='message'></span>
    <p></p>
    
    <div class="form-group">
    <button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
    </div>