Ajax获取输入文本框数组并将结果显示为div

Question

This is my display form

<form name='foodlist' action='checkout' method='POST'>
  <table>
    <tr>
      <td>Product Name</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Amount</td>
    </tr>
    <tr>
      <td><input type='text' name='foodname[]' size='10' class='foodname' /></td>
      <td><input type='text' name='price[]' size='2' class='price'/></td>
      <td><input type='text' name='qty[]' size='2' class='qty'/></td>
      <td><input type='text' name='amt[]'  size='2' class='amt'/></td>
    </tr>
    <tr>
      <td><input type='text' name='foodname[]' size='10' class='foodname' /></td>
      <td><input type='text' name='price[]' size='2' class='price'/></td>
      <td><input type='text' name='qty[]' size='2' class='qty'/></td>
      <td><input type='text' name='amt[]'  size='2' class='amt'/></td>
    </tr>
  </table>
</form>

I have AJAX jQuery to get input values.

$.ajax({
  type : "POST",
  url : "ajaxfood.php",
  data: $('[name="qty[]"]').serialize(),
  success : function(html) {
    alert (html);
  }
});

This is my php:

<?php
  $qtys = $_POST['qty'];
  echo json_encode($qtys);
?>

The above code is working perfectly and displaing the qty array. But my problem is I want to get all the textboxes in my php. I tried to send the while form but it won't worked

data: $('form').serialize(),

1. What is the way to send the whole form data.
2. and how to get it php.
3. and how to put the result in a div.

My first question is very important for me. please help

Answer 1

Try using $('form').serializeArray() for your AJAX data in your JS. If you're on a new version of Chrome, you can use the console in your Dev Tools (F12) to view the output in a table with:

var formArray = $('form').serializeArray(); 
console.table(formArray);

If you see all the info in there, it should be available in your PHP $_POST variable for your server-side code. Use the same var_dump() call on the server to make sure it's there. - http://jsfiddle.net/rsrj07fn/

This will get the information to the server, and print it out on the server to make sure it's there. var_dump() is not for your finished product, just for debugging purposes to visually see what is assigned to server side variables (like $_POST). If you want to use just the string values of the data which made it to the server, you should be able to use, for example:

echo $_POST['foodname'][0];
echo $_POST['foodname'][1];

echo $_POST['price'][0];
echo $_POST['price'][1];

etc.

To put them all in one DIV:

echo "<div>";
   echo $_POST['foodname'][0]."<br>";
   echo $_POST['foodname'][1]."<br>";
   echo $_POST['price'][0]."<br>";
   echo $_POST['price'][1]."<br>";
   echo $_POST['qty'][0]."<br>";
   echo $_POST['qty'][1]."<br>";
   echo $_POST['amt'][0]."<br>";
   echo $_POST['amt'][1]."<br>";
echo "</div>";