Sending javascript to php with ajax

[Number1awa]

Hey, I am having trouble sending a javascript variable to php at the moment.

I have div's which have id's on them then when I click on them I have it as onclick="getId(id)"

Then this is the code which is not working of course in sending the id to the php script
The page is called test.php.

<script type="text/javascript">
function getId(id)
{

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)
    {
      document.getElementById(id).innerHTML = xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","test.php?id="+id,true);
xmlhttp.send(); 
}
</script>



<?php
$q = $_GET['id'];
echo $q;
?>


<div id="2" onclick="getId(id)" style="cursor:pointer;border:1px solid black;background-color:#EDEDED;width:100px;">Why won't this work</div>

What I am wanting it to do is for the id to be an index in a php array which will contain the name of tables in a database to display.

Thanks.

[blocblue]

Have you considered using a JavaScript framework, e.g. jQuery? Frameworks offer a lot of benefits, for one making AJAX requests far easier by handling cross browser compatibility issues, etc.

Using jQuery, you could do the following:

<script type="text/javascript">
$(function() {
    $('div.clickable').click(function(event) {
        $.get('test.php', {id: $(this).attr('id')}, function(response) {
            $(this).text(response);
            //$(this).html(response);
        }});
    });
});
</script>

<div id="1" class="clickable">Example 1</div>
<div id="2" class="clickable">Example 2</div>
<div id="2" class="clickable">Example 3</div>

What this does, is to find all div elements with the class 'clickable'. It then watches for click events on those elements. When one of the div elements is clicked, it gets the id of the clicked element, sends it to test.php, and displays the response within the clicked element.

I have commented out the line $(this).html(response);. This is because jQuery treats plain text and HTML different. Based on your example code, you're returning a plain text response. If/when you change this to HTML, you would need to use the commented line instead.

You can download jQuery here: http://jquery.com.

R.

[ko ko]

onclick="getId(id)"

Missing argument. Put the value of id that was identified to accept the ajax result. Like this one:

onclick="getId('your_div_id')"

[minitauros]

It's indeed what Zero13 says. Your function needs an id to make use of the getElementById function. However, you're not sending the id to the function when you call it in your HTML. You could try replacing onClick="getId(id);" by onClick="getId(this.id);" if you want to send the id from the element that has the onClick action attached to it.

[diafol]

My twopenneth:

Use jQuery as blocblue suggests. Also move away from inline js and use handlers in your head section or external files. Things can get very messy very quickly with inline js.

//EDIT
Just re-read blocblue - he's done that for you.