CODEWITHSUNDEEP
javascriptphphtmlajax
user3770026
user3770026

Reputation:

AJAX - PHP - Content Not Loading

I am new in AJAX.

I am trying to load some content from my PHP file into the load.html. i made the function on the onKeyUp Event of a textbox.

But its always showing "UNDEFINED" as the output . :(

Please help me

The load.html file 

<!DOCTYPE html>
<html>
    <head>
        <script>
            function NickName(nick){
                var xmlhttp;
                if(window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.status==200 && xmlhttp.readyState ==4){
                        document.getElementById("divNick").innerHTML = xmlhttp.reponseText;
                    }
                }
                xmlhttp.open("GET","myphp.php?key="+nick,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <div id="divNick"></div>
        <input type="text" id="text_box" onKeyUp="NickName(this.value)">
    </body>
</html>

And the myphp.php file

<?php

if(isset($_GET['key']))
{
    $key = $_GET['key'];

    $choice1 = "Shifar";
    $choice2 = "Nidal";

    if($key==$choice1)
    {
        echo "Shifz";
    }
    else if($key==$choice2)
    {
        echo "Steavz";
    }
    else
    {
        echo "No Match Found";
    }

}




?>

Thanks in Advance. Shifar Shifz

Upvotes: 0

Views: 92

Answers (5)

Udhay
Udhay

Reputation: 31

Spelling mistake on your ajax code Instead of - document.getElementById("divNick").innerHTML = xmlhttp.responseText; You typed - document.getElementById("divNick").innerHTML = xmlhttp.reponseText;

Upvotes: 0

Kasun Rajapaksha
Kasun Rajapaksha

Reputation: 536

There is typo. your function name is NickName you are calling NicKName. K is capital

Change document.getElementById("divNick").innerHTML = xmlhttp.reponseText;

to document.getElementById("divNick").innerHTML = xmlhttp.responseText;

again a typo. reponseText --> responseText

Upvotes: 2

Mithun Satheesh
Mithun Satheesh

Reputation: 27855

its because you dint specify the correct function name.

You defined a function named NickName and called another named NicKName

updated to comments

its coming as undefined because of another typo u made xmlhttp.reponseText instead of xmlhttp.responseText

Upvotes: 2

Mahder
Mahder

Reputation: 419

I can see there is a typo error in your function name. When you call the function you have used NicKName but the function is actually defined as NickName. the (k) is capitalized in your calling statement.

Other advice for you, write Ajax like you have done is a very old approach. And most importantly you will have a great deal of coding for many browsers...you are supposed to deal with all the browsers out there. So why don't you use other ajax approach. I advice you to use jQuery $.ajax. Its very simple and handles all the cross-browser compatibility issues.

For eg. the above line of code could be replaced with....

$('#divNick').load('myphp.php?key='+nick);

Just one line. the other is you can also use the $.ajax which can let you do both POST and GET requests as you wish.

Most important you have said you are new to Ajax. If so why don't you already start reading about jQuery...besides its very rewarding in both by saving you time and when you are done, you will see how many job position require jquery as a skill set.

Hope this will help.

Upvotes: 0

spencer
spencer

Reputation: 454

Try like this :

xmlhttp.open("GET","myphp.php?key="+nick,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

xmlhttp.onreadystatechange = function()
{
    if(xmlhttp.status==200 && xmlhttp.readyState ==4)
    {
        document.getElementById("divNick").innerHTML = xmlhttp.reponseText;
    }
}

I think the order is important and NickName is not NicKName

Upvotes: 0

Related Questions