AJAX return and onsubmit HTML

Question

I'm trying to make a form to signup to my site but AJAX is not returning false for an onsubmit. Here is my code:

var c = false;
var h = true;
function hi(g, j, k) {
    if (g == j) {
        h = false;
    }
}
function validateForm() {
    var x = document.forms["hi"]["pass1"].value, v = document.forms["hi"]["pass2"].value, b = document.forms["hi"]["user"].value;
    if (x != v) {
        alert("Passwords must match");
        return c;
    }
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var a = this.responseText.split("\n")
            for (var n in a) {
                console.log(a);
                console.log(a[n]);
                console.log(b);
                hi(a[n], b, this.responseText)
                if (a[n] == b) {
                    alert("Username already exists")
                    return c;
                };
            };
        };
    };
    xmlhttp.open("GET", "http://www.ncpcs.com/carter/user.txt", true);
    xmlhttp.send();
    return h;
}`

and the onsubmit has return validateForm()

have you considered using jquery? Their AJAX function is much less verbose. Take a look http://api.jquery.com/jquery.ajax/ — PerrinPrograms, Mar 27 '18 at 13:47
This is because the `xmlhttp.onreadystatechange` function is a separate and asynchronous function. — Pete, Mar 27 '18 at 13:53
When you insert js code do not insert it uglified. It is really difficult to understand your code right now. — Krzysztof Janiszewski, Mar 27 '18 at 13:53
`validateForm()` will always return before the AJAX request is complete. — Mikey, Mar 27 '18 at 14:59

Mikey · Accepted Answer · 2018-03-27T15:15:54.903

Here's a different approach

First, instead of using onsubmit attribute on your form, use an onclick attribute on a normal (i.e. type="button") button. Upon clicking on the button, it will call the validateForm() function.

<form name="hi" action="otherPage.html">
    <input type="text" name="user" value="" />
    <input type="password" name="pass1" value="" />
    <input type="password" name="pass2" value="" />
    <button type="button" onclick="validateForm()">Submit</button>
</form>

Within function, if there is an error, it will simply alert. If all goes well, it will submit the form.

function validateForm() {
    // use better variable names
    var form = document.forms["hi"],
        pass1 = form["pass1"].value, 
        pass2 = form["pass2"].value, 
        user = form["user"].value;

    if (pass1 != pass2) {
        alert("Passwords must match");
        // this is only used to prevent execution of the rest of the function
        return;
    }

    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var a = this.responseText.split("\n")
            for (var n in a) {
                console.log(a);
                console.log(a[n]);
                console.log(user);
                //hi(a[n], user, this.responseText)
                if (a[n] == user) {
                    alert("Username already exists")
                    return;
                }
            };
            // at this point, everything went well so submit the form 
            form.submit();
        };
    };
    xmlhttp.open("GET", "http://www.ncpcs.com/carter/user.txt", true);
    xmlhttp.send();
}

AJAX return and onsubmit HTML

1 Answers1