AJAX - Retrieving data using JavaScript XMLHttpRequest and PHP

Question

I am trying to use AJAX on a form so that the user doesn't have to leave the current page to submit their name. I have got the function to work when the user types their name; it changes automatically while they're typing. What I'm struggling with is the onClick to submit the name. I am not receiving any response from the PHP file and I do not know why. Here is my code:

The form page: (The submit function sends the name through a global variable via the GET request)

<script type="text/javascript">

//Decalre the variables of name as Global variable
var name;

    //For IE 5 + 6
function httpReq(){
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return xmlhttp=new XMLHttpRequest();
    } else { 
        // code for IE6, IE5
        return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function nameTest(str) {
    if (str.length==0) { 
        document.getElementById("nameTest").innerHTML="Please enter your name.";
        return;
    }
    httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("nameTest").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","nameTest.php?q="+str,true);
    xmlhttp.send();
    return name = str;
}


// function to submit the users details to the database
function submit(str) {
    httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("submitted").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","mailing-list.php?name="+name, true);
    xmlhttp.send();
}   
</script>

    Name: <input type="text" onkeyup="nameTest(this.value)">
    <span id="nameTest">Please enter your name.</span>
            <input style="width: 100px; height: 40px;" type="button" onclick="submit" value="Join!">
        <span id="submitted"></span>

The PHP page which doesn't give a response (Just echoing something simple until I get a response):

<?php

$name = $_GET["name"];

echo "Hello There " + $name;

?>

Can't seem to figure out why there is no response. Any help appreciated!

Answer 1

var name;

    //For IE 5 + 6
function httpReq(){
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    } else { 
        // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function nameTest(str) {
    if (str.length==0) { 
        document.getElementById("nameTest").innerHTML="Please enter your name.";
        return;
    }
    var xmlhttp = httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("nameTest").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","nameTest.php?name="+str,true);
    xmlhttp.send();
    window.name = str;
}


// function to submit the users details to the database
function submit() {
    var xmlhttp = httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("submitted").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","mailing-list.php?name="+window.name, true);
    xmlhttp.send();
}

You haven't assigned a value to xmlhttp, probably the console tells you it is undefined, you should check it. Sorry, there are a lot of errors inside your code. I edited it, you should try now. submit() doesn't get params, it just get the name from the global variable name(window.name), which was set before by the function nameTest(str).

Last thing: you should check compatibility between what you want client and server side. You used "?q=" instead of "?name=" in your query string, pay attention to these things!

Answer 2

According with LightStyle, you should use the return of httpReq() method to retrieve your requestObject.

var xmlhttp = httpReq();
    xmlhttp.onreadystatechange=function() {...}

You have to modify onclick="submit" into onclick="submit();" to make it called.

This PHP script will return 0, the concatenation operator is . in PHP :

<?php
$name = $_GET["name"];
echo "Hello There " . $name;
?>

Answer 3

Value "name" in your function submit(str) is unknown, and thus empty. change that into

xmlhttp.open("GET","mailing-list.php?name="+str, true);

and call your function like this:

submit("NameToShow");

BTW: Using jQuery would make this alot easier for you.