Search code examples
javascriptif-statementxmlhttprequest

Why if and else both condition executing same time in JavaScript | If and Else Condition

How If and else condition work both in JavaScript. if (xhr.readyState == 4 && xhr.status == 200)

I am working on php MVC project.

I created a profile edit page in background JavaScript If and Else both code executing. profile edit Successfully but else code work and it's show error "Sorry, this content isn't available right now".

why this else condition work??

Code

 document.querySelector("#Profile_Save").addEventListener("click", () => {
        if (document.querySelector("#Profile_Edit_Email").value.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
            document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
            document.querySelector("#Profile_Edit_Msg").classList.remove("active_denger");
            document.querySelector("#Profile_Save").innerHTML = "Loading...";
            document.querySelector("#Profile_Save").classList.remove("active");
            document.querySelector("#Profile_Save").disabled = true;

            document.querySelector("#Profile_Edit_F_Name").disabled = true;
            document.querySelector("#Profile_Edit_L_Name").disabled = true;
            document.querySelector("#Profile_Edit_Email").disabled = true;

            var f_name = document.querySelector("#Profile_Edit_F_Name").value,
                l_name = document.querySelector("#Profile_Edit_L_Name").value,
                email = document.querySelector("#Profile_Edit_Email").value;

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "Api/ProfileEdit", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) { // this one if executing 
                    var json = JSON.parse(xhr.responseText);
                    if (json.Status == "Ok") {
                        window.location.href = "Profile"; // it also work 
                    } else {
                        document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
                        document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                        document.querySelector("#Profile_Edit_Msg").innerHTML = json.Message;
                    }
                } else { // this one else executing 
                    document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                    document.querySelector("#Profile_Edit_Msg").innerHTML = "Sorry, this content isn't available right now"; // this message show 
                }
            }
            xhr.send("F_Name=" + f_name + "&L_Name=" + l_name + "&Email=" + email);
            document.querySelector("#Profile_Save").innerHTML = "Register";
            document.querySelector("#Profile_Save").classList.add("active");
            document.querySelector("#Profile_Save").disabled = false;
            document.querySelector("#Profile_Edit_F_Name").disabled = false;
            document.querySelector("#Profile_Edit_L_Name").disabled = false;
            document.querySelector("#Profile_Edit_Email").disabled = false;
        } else {
            document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
            document.querySelector("#Profile_Edit_Msg").innerHTML = "Invalid Email Address!";
        }
    });

return JSON

{"Status":"Ok","Message":"Profile Edit Successfully!"}

Output

open profile page and 
error message:- "Sorry, this content isn't available right now"

enter image description here

help me! Thank you!!

Solution

  • onreadystatechange event is fired for all the statuses mentioned in that link. In your case, you will need to check when status equals 4(i.e, when the operation is complete and response is sent back to the browser). So, you can amend your code block like below:

    xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {  
                    if(xhr.status == 200){
                        var json = JSON.parse(xhr.responseText);
                        if (json.Status == "Ok") {
                            window.location.href = "Profile";  
                        } else {
                            document.querySelector("#Profile_Edit_Msg").classList.remove("active_success");
                            document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                            document.querySelector("#Profile_Edit_Msg").innerHTML = json.Message;
                        }
                    }else{
                         document.querySelector("#Profile_Edit_Msg").classList.add("active_denger");
                        document.querySelector("#Profile_Edit_Msg").innerHTML = "Sorry, this content isn't available right now"; // this message show 
                    }
                    
                }
            };