Javascript AJAX request is not returning a HTML form textarea

Question

I'm trying to have my page show a HTML textarea submission form after the user clicks on a button using AJAX, but for some reason the response from AJAX shows everything except for the textarea. I'm a bit new to web developing so my code is a mess. I deleted some stuff out of the code to make it easier to read, but the code below is still not working. The javascript part is:

var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object
var poll_id;

function getVote(choice, id, poll, display) {
  switch(poll)
  {
  case 1:
    poll_id = '1';
    break;
  case 2:
    poll_id = '2';
    break;
  case 3:
    poll_id = '3';
    break;
  default:
    alert("Error in poll ID..");
  }

  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
    //var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","poll_vote.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("choice=" + choice + "&id=" + id + "&disp=" + display); //Posting txtname to PHP File
  }
}


function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("poll"+poll_id).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

The buttons to click are:

<div id="poll1">
            <table id="pollm"><tr><td>
            <a href="#" onclick="getVote(0,<?php echo $id; ?>,1,'m')" ><img src="/Images/A_not_pressed_small.png" border="0" onmouseover="this.src='/Images/A_pressed_small.png';" onmouseout="this.src='/Images/A_not_pressed_small.png';" /></a>
            </td><td>
            <?php echo $current['choice1']; ?>
            </td></tr>
            </table>
            <table id="pollm"><tr><td>  
            <a href="#" onclick="getVote(1,<?php echo $id; ?>,1,'m')" ><img src="/Images/B_not_pressed_small.png" border="0" onmouseover="this.src='/Images/B_pressed_small.png';" onmouseout="this.src='/Images/B_not_pressed_small.png';" /></a>
            </td><td>
            <?php echo $current['choice2']; ?>
            </td></tr>
            </table>
            </div>

And poll_vote.php is just a table:

<table width="200" border="0" cellpadding="0" cellspacing="0" >
<tr>
<form name="form1" method="post" action="add_comment.php">
<td><textarea name="a_answer" cols="45" rows="3" id="comment"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Submit" class="text_submit"></td>
<td>hello world!</td>
<td></td>

</tr>
</table></td></tr>
    </table>

After I click the button, I can see the submit button and "hello world!" AJAX response, but no textarea. Anyone have any suggestions please? Thanks

Answer 1

It might be worth you learning jQuery. This will save you time in the future.

Answer 2

I agree with one comment that putting the form tag before the <td> is odd, but why fix your logic there.

One problem your browser may have is you are missing a close element for <form> :

<tr>
<form name="form1" method="post" action="add_comment.php">
<td><textarea name="a_answer" cols="45" rows="3" id="comment"></textarea></td>
</tr>

<tr>
<form name="form1" method="post" action="add_comment.php">
<td><textarea name="a_answer" cols="45" rows="3" id="comment"></textarea></td>
</form>
</tr>

If you use firebug, as suggested, or the IE debugger on IE8, you can look at what is actually returned from the server, and then you can see what is going on, but it is hard to troubleshoot this type of problem without doing the server and client side.

It will be worth your time to learn to use the debuggers for the browsers you want to test with, otherwise javascript becomes very frustrating.