Angel Politis Angel Politis - 5 months ago 7
Ajax Question

Why is my unified function not working, while as two separate function they work?

I am trying to organize my vast code into functions and I thought of joining my two separate AJAX requests for username and email into one function, but things haven't gone as planned.

No matter how, where or when I call the function for the email input as shown below:

var email = document.getElementById("email");

email.onblur = function() {
exists("email", this.value);
};


The AJAX request is never sent and the reason if the first
if
statement of my function; it always returns false and executes the code inside
else
. Even though I know what causes the issue, I can't find out why.

I would really appreciate any help! Below, you can find my code ↓

var xhttp = null;
var timer = null;

function exists(type, value, regex, label, loader, tip, e) {
regex = (type === "username") ? /[a-z0-9-_]/gi : (type === "email") ? /[a-z0-9-_@.]/gi : "";
label = (type === "username") ? "username_label" : (type === "email") ? "email_label" : "";
loader = (type === "username") ? "loader1" : (type === "email") ? "loader2" : "";
tip = (type === "username") ? "tip1" : (type === "email") ? "tip2" : "";
e = e || event;
var keypressed = String.fromCharCode(e.which);
if (keypressed.match(regex) || e.which === 8 || e.which === 46) {

// Check if there is an AJAX in progress and abort it
if (xhttp) {
document.getElementById(loader).innerHTML = "";
xhttp.abort();
}
xhttp = new XMLHttpRequest();
clearTimeout(timer);
timer = setTimeout(function() {
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 1) {
document.getElementById(loader).innerHTML = "1";
}
else if (xhttp.readyState === 4 && xhttp.status === 200) {
document.getElementById(loader).innerHTML = "2";
document.getElementById(tip).innerHTML = xhttp.responseText;
if (xhttp.responseText.indexOf("unavailable") > 0) {
document.getElementById(label).style.color = "red";
}
else {
document.getElementById(label).style.color = "green";
}
}
};
xhttp.open("POST", "php.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(type + "=" + value);
}, 1500);
}
else {
alert("I am the cause of the error. HA HA HA!");
}
};


Clarification: The function works as planned on the username
input
.

Answer

The problem is that your function seems to have been created to be called in response to a key event. The e.which property is undefined in your example, because you are responding to a blur event. And thus the if condition fails.

Think of what you actually want to test in that if when dealing with a blur event. Certainly it is not a key code you need to test at that point.

NB: Also note that you do not pass a value for most of the arguments of the exists function. This is also true for e. Note that thus the expression e || event becomes event, which is defined in Internet Exporer, but not in most other browsers (the global event object is non-standard).

If you need the event object in your function, then make sure to pass it:

email.onblur = function(e) {
    exists("email", this.value, e); 
};

function exists(type, value, e) {
    // and now it is OK to do:
    e = e || event;
    // ...
}

You apparently don't need the parameters regex, label, loader, tip as you define their values at the start of the function.

Comments