I have a simple form where a admin can change her/his password. In order to do so she/he needs to enter the old password and two times the desired new password. In order to make this work I have the following basic jQuery function:
This is basically working fine when all requirements are met. I.e. The passwordForm fading out, the statusMessage fading in and the database update query is executed. But what if the requrements are not met? If the old password is not eq to the new entered password and if the new password and the repeat password fields do not match. In that case I obviously don’t want the passwordForm to fade out, instead only the input files needs to be reset
$("#passwordForm").find("input").val("");
What do I need to change in the success function to make that happen
Well #1: Do some validation on the sending end before you send it to the PHP engine. (Keep the validation at the PHP end also, because you never trust a client based validation, but.) #2: Have PHP chuck a status other than 200 back. 400 would be good for this. Chucking an error code rather than 200 OK will trigger ajax to call error instead of success.
@m_hutley Thx again for the reply. Excuse my ignorance but this is really confusing me! I use the if/elseif/else functions in order to determine if the requirements were met or not. Do you mean that I can add this to the error block
The error block is just “Something went wrong, the URL i requested sent back an error code.” It’s not specific to “There was a password mismatch”.
What you’ve got there is almost fine (though i’d remove the debugging console.log’s in production code ;P). response is an xhr (jqXHR) object, so you should refer to response.responseText for the contents of the message PHP echoed out.
Alternatively, because you always want to do two of the three instructions, you could do it this way:
$.ajax({
type: "POST",
url: "/admin/page/change_password",
data: $(this).serialize(),
success: function(data){
$("#passwordForm").fadeOut(500);
},
complete: function(response) {
//Regardless of if it was successful...
$("#passwordForm").find("input").val("");
$("#statusMessage").html(response.responseText).fadeIn(1000);
}
});
Edit: I was cheering a bit to early. The passwordForm should only fade out if all requirements were met. Now it is fading out no matter what. Hope this make any sense
@m_hutley Thank you for the patience This (with the http_response_code) is completely new to me. Not sure where to start and where to finish. I have it temporary working though using the following in the jQuery function:
So. Basics of HTTP communication.
Every time you request a file, the response carries with it a status code.
Most times, that code is 200. Which means “OK”.
Things that start with 2 are success codes. (OK, Created, Accepted, etc)
Things that start with 4 are Client Error codes (Not Found, Unauthorized, etc)
Things that start with 5 are Server Error codes (Bad Gateway, Internal Server Error etc). Additional Reading
PHP doesn’t have a conceptual idea that the password not matching is an error. Something being false is just… something being false. It processes its code, and if no PHP errors occur, it hands back whatever HTML you echoed out, with a status set to 200, because it successfully served the document, regardless of its content.
What we’re doing is telling PHP “If this happens, we want to set the status code to 400 instead”. Error Code 400 corresponds to Bad Request.
AJAX doesn’t inspect the contents of the result either. It determines whether the request was successful or not by the status code it receives. (Similar to PHP, if it receives a status 200, it successfully got a document. It doesn’t care what’s IN the document.)
Notice that most of the status codes are 200. Which are fine. There’s a 307 in there, which indicates i’ve been redirected to get the file from elsewhere (the 200 code one directly below it, when the browser followed the redirect)
There’s also a couple of 0’s marked as flat out (failure). Which don’t translate to any status. Which is odd, but is probably an instance where something i’m running blocked the request (ad-blockers, antiviruses, etc can cause this)