0

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

Improve this question
6
  • 1
    Off topic: do yourself a favour and use a js library, like jquery or mootools, to execute ajax requests. Saves you a lot of pain in the ass ;) Commented Jul 22, 2014 at 10:45
  • 1
    On topic: "it doesn't work" is quite a broad definition. Could you be a bit more specific? Commented Jul 22, 2014 at 10:45
  • It doesn't respond anything! Commented Jul 22, 2014 at 10:48
  • Yeah, I got that... But let's do some basic debugging. Check your console; anything there? Add alert(nick); just before var xmlhttp;, does an alert pop up? Add alert('onreadystatechange called'); in the callback. Does an alert pop up? Commented Jul 22, 2014 at 10:52
  • Yeah giorgio , Its showing my Real Output which i typed in the textbox, but still the output is UNDEFINED. I also tried the alert('onreadystatechange called'); . that too work properly! Commented Jul 22, 2014 at 11:00

5 Answers 5

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Yah, thanks. its started to respond ! but always showing Undefined. why mithun ?
another typo it is. reponseText should be responseText
Huhuhuh.. its working Perfectly Mithun. Thank you so much. :)
you guys should become friends
@ShifarShifz please mark mithunshathesh's answer as correct answer.
|
2

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

Improve this answer

2 Comments

Anywyz.. its started to respond. but it's showing UNDEFINED! Why ?
change reponseText to responseText
0

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

Improve this answer

1 Comment

you are right,Thanks, its started to respond ! but always showing Undefined. Why Spencer ?
0

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.

Improve this answer

1 Comment

Oh really. Thanks Mahder for the Valuable informations. see, I got this method from W3schools.com . yet the last minute i thought this is the only method to use Ajax . :) . but as the Old kings Says " YOU ARE OPENED MY EYES " ;)
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.