Question

I made a simple login form where a user can click on a register button.

I loaded the register form using AJAX but it won’t keep the behaviour I scripted on the log in form even though I have used the same class names…

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);
}();

Form Behaviour:

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);
}
}();

HTML (register.html)

<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>

HTML (before register.html) takes its place.

<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>

Answer 1

I think you need to re-bind the form behaviour to the newly loaded content. So,

if (request.readyState === 4 && request.status === 200){
document.getElementById("signInBody").innerHTML = request.responseText;
// Wrap your form behaviour in a function that you can call here