After creating a basic login form with an option for users to register, I encountered an issue when loading the registration form using AJAX. The behavior I had scripted for the login form wasn't maintained even though I used identical class names...
Below is the AJAX request:
var displayRegisterForm = function() {
var regLink = document.getElementById("signInBoxFooter");
regLink.addEventListener("click", function(){
var request = new XMLHttpRequest();
request.open("GET", "register.html");
request.onreadystatechange = function(){
if (request.readyState === 4 && request.status === 200){
document.getElementById("signInBody").innerHTML = request.responseText;
} else {
document.getElementById("signInBody").innerHTML = "Whoops something went wrong!"
}
};
request.send(null);
},false);
}();
Regarding the form behavior:
var textInput2 = function(){
var inputs = document.getElementsByClassName("inputNoFocus");
for (i = 0; i < inputs.length; i++){
var input = inputs[i];
var busy = false;
input.addEventListener("focus", function(e){
var defaultValue = this.getAttribute("value");
if(this.value === defaultValue){
this.value = "";
this.setAttribute("class", "inputFocus");
}
if(defaultValue === "Password"){
this.setAttribute("type", "password");
this.setAttribute("class", "inputFocus");
}
this.parentNode.parentNode.setAttribute("class", "divFocus");
busy = true;
}, false);
input.addEventListener("blur", function(e){
var defaultValue = this.getAttribute("value");
if(this.value === ""){
this.value = defaultValue;
this.setAttribute("class", "inputNoFocus");
}
if(this.value === "Password"){
this.setAttribute("type", "text");
this.setAttribute("class", "inputNoFocus");
}
this.parentNode.parentNode.setAttribute("class", "divNoFocus")
busy = true;
},false);
}
}();
The HTML content within "register.html" file:
<div class="boxBody">
<form id="regForm">
<div id="regTop"></div>
<div class="divNoFocus">
<label><input class="inputNoFocus" type="text" value="Email Address"></label>
</div>
<div class="divNoFocus">
<label><input class="inputNoFocus" type="text" value="First Name"></label>
</div>
<div class="divNoFocus">
<label><input class="inputNoFocus" type="text" value="Surname"></label>
</div>
</form>
</div>
Previously contained HTML (before loading register.html):
<div id="signInBody" class="boxBody">
<form id="login">
<div class="divNoFocus">
<label><input class="inputNoFocus" type="text" value="Username or Email"></label>
</div>
<div class="divNoFocus">
<label><input class="inputNoFocus" type="text" value="Password"></label>
</div>
</form>
</div>