如何使用ajax捕获while循环中的变量？

Question

I have a loop to answer questions that looks something like this:

<?php
while ($u=mysql_fetch_array($result)){
?>     
<table>
 <tr>
     <td>Question_ID</td>
     <td>Question</td>
     <td>Answer</td>
 </tr>
 <tr>
     <td><? echo $u['question_id'];?></td>
     <td><? echo $u['question'];?></td> 
     <td> 
         <form>
         <input type="hidden" value="echo $u['question_id'];?>" />
         <input type="text"/>
         <a href="#" onClick="ajax_answer();">Send Answer</a>
         </form>
     </td>
 </tr>
</table>
<?php
} 
?>  

If the user answers for example the third question that appears on the page, my question is how do I capture the text written and the question_id so I can send those variables to a php page?

<script>
   function ajax_answer(){
       $.ajax({
       question_id = ??? //how do I capture this variable?
       answer = ??? //how do I capture this variable?
       url:'answers.php',
       type:'POST',
       dataType:'text/html',
       data:'question_id='+question_id + '&answer='+answer,
       success: function(){
                          };
             });
       };
</script>

Thanks!

Answer 1

If you want to do it in pure javascript,
then pass this to your ajax_answer function from onclick event like below

<?php
  while( $u = mysql_fetch_array( $result ) ) {
?> 
  <tr>
    <td><?php echo $u['question_id'];?></td>
    <td><?php echo $u['question'];?></td> 
    <td>
      <input type="hidden" value="<?php echo $u['question_id'];?>" />
      <input type="text" />
      <a href="#" onclick="ajax_answer( this );">Send Answer</a>
    </td>
  </tr>
<?php
  }
?>

and your javascript will be...

<script type="text/javascript">
  function ajax_answer( elem ) {
    var question_id = elem.parentElement.children[0].value;
    var answer      = elem.parentElement.children[1].value;

    /// do your request here

    return false;
  }
</script>

And the same with jQuery.
Add name attribute to those input elements, and add a classname to anchor element

<?php
  while( $u = mysql_fetch_array( $result ) ) {
?> 
  <tr>
    <td><?php echo $u['question_id'];?></td>
    <td><?php echo $u['question'];?></td> 
    <td>
      <input type="hidden" name="question_id" value="<?php echo $u['question_id'];?>" />
      <input type="text" name="answer" />
      <a href="#" class="send_answer">Send Answer</a>
    </td>
  </tr>
<?php
  }
?>

Javascript
add the onclick event handler dynamically. Now your function ajax_answer accepts two parameters question_id and answer, we will pass those two parameters through the click event handler

<script type="text/javascript">
  $(function() {
    $("a.send_answer").on("click", function( event ) {
      event.preventDefault();
      var td  = $(this).parents("td:first");
      var qid = $("input[name=question_id]", td).val();
      var ans = $("input[name=answer]", td).val();

      ajax_answer( qid, ans );
    });
  });
  function ajax_answer( question_id, answer ) {
    /// do your request here
  }
</script>