Question

I’ve made a settings page for users and the issue im having is that after you send the form once and say you get an error like “Please fill in all fields” and then you go to submit it again it won’t echo out any more errors or success messages but it will update your password.

JS:

<script type="text/javascript">
    $(document).ready(function() {
        $("#changePassword").click(function(){
                var userIdSettings  = <?php echo $_SESSION['id']; ?>;
                var currPass        = $("#currentPass").val();
                var newPass         = $("#newPass").val();
                var newPassRe       = $("#newPassRe").val();
                $.post("inc/ajax.php", {userIdSettings: userIdSettings, currPass: currPass, newPass: newPass, newPassRe: newPassRe}, function(data){
                    $(".message").html(data).delay(2000).fadeOut('slow', function(){

                    });
                });
        });
    });
</script>

PHP:

  if ($_POST['userIdSettings']) {

    $userIdSettings     = $_POST['userIdSettings'];
    $currPass           = $_POST['currPass'];
    $newPass            = md5($_POST['newPass']);
    $newPassRe          = md5($_POST['newPassRe']);

    if (!empty($currPass) && !empty($newPass) && !empty($newPassRe)) {

        $data = new db();
        $data->dbConnect();
        $data->dbSelect();

        $currPass  = md5($currPass);
        $checkPass = mysql_query("SELECT * FROM users WHERE id = '$userIdSettings'") or die("Error: ".mysql_error());
        $checkPass = mysql_fetch_assoc($checkPass);

        if ($currPass == $checkPass['password']) {
            if ($newPass == $newPassRe) {
                mysql_query("UPDATE users SET password = '$newPassRe' WHERE id = '$userIdSettings'") or die("Error: ".mysql_error());
                echo '<div class="messages green large"><span></span>Your password has been updated!</div>';
                exit;
            } else {
                echo '<div class="messages red large"><span></span>Your new passwords dont match!</div>';
                exit;
            }
        } else {
            echo '<div class="messages red large"><span></span>Your current password is not correct!</div>';
            exit;
        }

    } else {
        echo '<div class="messages red large"><span></span>Please fill in all fields!</div>';
        exit;
    }
}

Answer 1

$(".message").html(data).show().delay(2000).fadeOut('slow', function(){});

Notice the .show()

You are printing the data to the page, then using the fadeOut method, which at the end result sets display:none. Then you are trying to output more data, but the display is still none, resulting in nothing being displayed on the page, even though the DOM element is being updated. If you add the show() method, this will ensure the CSS value of display is set to block; show the new text for the DOM element; and then fadeOut… slowly… after 2 seconds.