How to load forms using ajax

Question

I'm making a simple login and register form using ajax This is my code:

function loadRegistrationForm() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("container").innerHTML =
            this.responseText;
        }
    };
    xhttp.open("GET", "registrationform.php", true);
    xhttp.send();
}

.

<div id="container">
  --->LOGIN FORM
  <a onclick="loadRegistrationForm">Register?</a>
</div>

but whenever I click the link the registration form will only flash for a second then it gets back to the login form. What am I doing wrong?

Answer 1

use

onclick="loadRegistrationForm()"

instead of

onclick="loadRegistrationForm"