Question

I have a script to automatically tell people when their new passwords match (account activation) but I need to find a way to get it to enable the submit button as well.

Here is my code:

JS:

function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) $("#divCheckPasswordMatch").html("<font color=\"red\"><b>Check Passwords</b></font>");
    else $("#divCheckPasswordMatch").html("<font color=\"green\"><b>Passwords Match</b></font>");
}

$(document).ready(function() {
    $("#txtConfirmPassword").keyup(checkPasswordMatch);
});​

HTML

<table>
    <form action="activate_account.php" method="post">
        <tr>
            <td align="right">
                <label for="new_password">Password (6-12 chars):</label>
            </td>
            <td>
                <input type="password" name="new_password" id="new_password" />
            </td>
        </tr>
        <tr>
            <td align="right">
                <label for="new_password2">Again:</label>
            </td>
            <td>
                <input type="password" name="new_password2" id="new_password2" onkeyup="checkPasswordMatch();"
                />
            </td>
        </tr>
        <tr>
            <td>
                <td>
                    <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                </td>
                <td>
                    <div id="submit">
                        <input type="submit" value="Activate Account" disabled="disabled" />
                    </div>
                </td>
        </tr>
</table>

Answer 1

You must do this:

$("#buttonActivate").prop("disabled", false);  // to enable the button

Afterwards don’t forget to use this code, if a user decides to change the password again, so your button would get inactive again

 $("#buttonActivate").prop("disabled", true); // to disablethe button

Just replace your current code with this one but don’t forget to update HTML as well:

jQuery

$(document).ready(function() {
function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) {
        $("#new_password").css("background", "red");
        $("#new_password2").css("background", "red");
        $("#buttonActivate").prop("disabled", true);
        return false;
    } else {
        $("#new_password").css("background", "green");
        $("#new_password2").css("background", "green");
        $("#buttonActivate").prop("disabled", false);
        return true;
    }
}
  $("input").keydown(function() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();
    if (password.length >= 6 && confirmPassword.length >= 6) {  // let's check if the password is >= 6 otherwise there is nothing to check
        checkPasswordMatch();
    }
});

See updated HTML in the example below:

1. Set an ID to your <form>, let’s say id="accountActivation";
2. Change your input button to button and set an id to it as well:
   <button id="buttonActivate" type="submit" disabled="disabled">Activate Account</button>

jsFiddle Working Example

Updated jsFiddle to show Passwords mismatch warning

I believe it will work for you right!