Javascript La requête AJAX ne retourne pas un formulaire HTML textarea

Question

J'essaye d'avoir ma page montrer un formulaire de soumission HTML textarea après que l'utilisateur clique sur un bouton en utilisant AJAX, mais pour une raison quelconque la réponse d'AJAX montre tout sauf pour le textarea. Je suis un peu nouveau sur le web, donc mon code est en désordre. J'ai supprimé certains éléments du code pour le rendre plus facile à lire, mais le code ci-dessous ne fonctionne toujours pas. La partie javascript est:

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"); 
    } 
    } 
} 

Les boutons à cliquer sont:

<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> 

Et poll_vote.php est juste une 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> 

Après avoir cliqué sur le bouton, je peux voir le bouton soumettre et "Bonjour tout le monde!" Réponse AJAX, mais pas de zone de texte. Quelqu'un at-il des suggestions s'il vous plaît? Merci

Answer 1

Je suis d'accord avec un commentaire que mettre la balise form avant le <td> est étrange, mais pourquoi y remédier votre logique.

Un problème de votre navigateur peut avoir est vous manque un élément proche de <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> 

Si vous utilisez Firebug, comme l'a suggéré, ou le débogueur IE sur IE8, vous pouvez regarder ce qui est réellement renvoyé à partir du serveur, puis vous pouvez voir ce qui se passe, mais il est difficile de résoudre ce type de problème sans faire du côté du serveur et du client.

Il vaudra la peine d'apprendre à utiliser les débogueurs pour les navigateurs que vous voulez tester, sinon javascript devient très frustrant.

Answer 2

Cela peut valoir la peine d'apprendre jQuery. Cela vous fera gagner du temps dans le futur.