Ajax调用返回[object HTMLInputElement]

Question

i am learning ajax and doing some practice. I am facing a problem. Here is my code.

<input class="category" id="design" type="button" value="Design" onclick="loadXMLDoc(design)" />

Ajax:

function loadXMLDoc(name)
{
 var xmlhttp;
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
    xmlhttp.onreadystatechange=function()
   {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {

    var array = xmlhttp.responseText;
    alert(array);


     }
   }
  xmlhttp.open("GET","server.php?cat="+name,true);
  xmlhttp.send();
 }

server.php:

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


}

Now, when i click on the button, the alter gives me [object HTMLInputElement] when i am expecting to get "design". What is wrong in it?

Answer 1

What is wrong in it?

You have to pass a string to the function:

onclick="loadXMLDoc('design')"

Currently you are passing the variable design. Since you have an element with ID "design" this variable happens to refer to that element. Then when you are trying to send the element to the server it is converted to a string. The default string representation of an input DOM element in JavaScript is "[object HTMLInputElement]".