CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Sourav Sarkar
Sourav Sarkar

Reputation: 292

Ajax to get input textbox array and display the result to a div

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

Upvotes: 0

Views: 1536

Answers (1)

user1189882
user1189882

Reputation:

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

Upvotes: 1

Related Questions