JQuery is not picking up echo from php

Question

I'm echoing a message ('ok') from a PHP script to a JQuery ajax call.

I'm echoing out the correct message, and its showing up in the console when i log it, but the appropriate jquery function is not firing - according to the code i should get an Your password has been changed successfully" message, but I only get a "there was a problem" message - can anyone suggest a reason why?

here is the code first the PHP:

if(isset($_POST['oldpass'])){
    $oldpass = mysql_real_escape_string($_POST['oldpass']);
    $newpass = mysql_real_escape_string($_POST['newpass']);
    $sql = "SELECT password, salt FROM users WHERE email='$log_email' AND id='$log_id' LIMIT 1";
    $query = mysqli_query($db_conx, $sql);
    $numrows = mysqli_num_rows($query);
    if($numrows > 0){
        while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
            $current_salt = $row["salt"];
            $db_pass = $row["password"];
        }

        $old_pass_hash = crypt($oldpass, $current_salt);
        if ($old_pass_hash != $db_pass){
            echo "problem";
            exit();
        }
    }
    $s = "$2a$10$";
    $random = randStrGen(20);
    $salt = $s.$random;
    $p_crypt = crypt($newpass, $salt);
    $sql = "UPDATE users SET password='$p_crypt', salt='$salt' WHERE email='$log_email' AND id='$log_id' LIMIT 1";
    $query = mysqli_query($db_conx, $sql);
    if ($query == true){
        $_SESSION['password'] = $p_crypt;
        echo 'ok';
        exit();
    } 
}
?>

This is the javascript/JQuery

function change_password(){
    var oldpass = $('#old_pass').val();
    var newpass = $('#new_pass').val();
    var newpass_conf = $('#confirm_new_pass').val();

    if(newpass != newpass_conf){
        $('#status').html("Your passwords do not match");
    } else if(newpass=="" || oldpass==""){
        $('#status').html("You have not entered anything");
    }
    $.ajax({
      type: 'POST',
      url: "changePassword.php",
      dataType: 'text',
      data: {
          "oldpass": oldpass,
           "newpass": newpass_conf    },
      success:function(data){

         if(data == "ok"){
              $('#change_password_form').html("<h2> Success</h2><div class='noerror'><p> Your password has been changed successfully.</p> <p> You may now close this window.</p></div>");
          } else {
              $('#status').html("There was a problem");
          }
       }
    });
}

$(document).ready(function(){
    $(document).on('click','#change_password', function(){
    change_password();
});


});
</script>

and finally the html

<div> <h1>Change your password</h1></div><hr>
  <form id="change_password_form" class="input" onsubmit="return false;">
  <div> <label for="old_pass">Current Password:</label>
    <input id="old_pass" type="text" class="searchbox" onfocus="emptyElement('status')" maxlength="88" value=""></div>
  <div> <label for="new_pass">New Password:</label>
    <input id="new_pass" class="searchbox" type="text"  onfocus="emptyElement('status')" maxlength="88" value=""> </div>
 <div><label for="confirm_new_pass">Confirm New Password:</label>
    <input id="confirm_new_pass" class="searchbox" type="text"  onfocus="emptyElement('status')" maxlength="88" value=""><div> 
  <input type="button" style="position:relative;top:10px; float:right;" id="change_password" value="Change Password"></form>
    <span id="status" class="statuserror"></span>
</body>
</html>

Answer 1

change the dataType: "json" in your ajax call

then in your php code return json data
json_encode(array('response'=>'ok'));

your ajax success function should look like this,

success: function (data) {
    var resultObject = jQuery.parseJSON(data);
        if(rersultObject['response']=='ok') {
            $('#change_password_form').html("<h2> Success</h2><div class='noerror'><p> Your password has been changed successfully.</p> <p> You may now close this window.</p></div>");
        } else {
            $('#status').html("There was a problem");
        }
    }
}`

here parseJSON is used to convert JSON string to javascript object.

Answer 2

I got this problem a while ago and could never figure it out, although different scenario. What I did was to change the data type to json like so:

$.ajax({
    type: 'POST',
url: url,
data: 'data=data&other=other'
dataType: 'json',
//if everything goes out as planned
success: function(response) { 
       alert(response['data']);
}
}); 

and in the php

 $respond = array("data" => 'ok',
   "other" => 'whatever else'
  );
echo json_encode($respond);  //send a response back to javascript
exit();