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!

Your httpReq makes no sense, you are making new objects, but you are really just creating a new global variable xmlhttp. I hope you do not plan on making multiple calls at the same time. — epascarello
– epascarello, Commented May 13, 2013 at 13:30
In PHP, you use $_GET["name"], but the key in JavaScript you use is q: "?q="+str — Ian
– Ian, Commented May 13, 2013 at 13:31
@epascarello the httpReq was just to sort between the old IE versions and the rest of the browsers in a function to pull it out so I don't do it several times, I'm sure that's not the proble because the nameTest part works fine. — Luke Turnbull
– Luke Turnbull, Commented May 14, 2013 at 9:12

Niccolò Campolungo · Accepted Answer · 2013-05-13 13:36:34Z

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!

Sorry , I didn't specify, it's the submit() function that doesn't work. I only showed the nameTest function as well because that is where I gain the variable names value for the submit function.
So you want nameTest to "save" the name that will be used by submit() to retrieve data?

Marcassin · Accepted Answer · 2013-05-13 13:49:32Z

1

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

answered May 13, 2013 at 13:49

Marcassin

1,4051 gold badge14 silver badges23 bronze badges

Comments

Borniet · Accepted Answer · 2013-05-13 13:31:34Z

0

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.

answered May 13, 2013 at 13:31

Borniet

3,5584 gold badges26 silver badges33 bronze badges

Collectives™ on Stack Overflow

AJAX - Retrieving data using JavaScript XMLHttpRequest and PHP

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related