Disable/Enable Submit Button until all forms have been filled

后端 未结 9 605
囚心锁ツ
囚心锁ツ 2020-12-13 06:59

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

9条回答
  •  春和景丽
    2020-12-13 07:48

    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);
                    }
                } 
    

提交回复
热议问题