Ajax to get input textbox array and display the result to a 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(),

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

My first question is very important for me. please help

@JayBlanchard the data: $('form').serialize(), I write in place of data: $('[name="qty[]"]').serialize(), is not working — Sourav Sarkar
– Sourav Sarkar, Commented Jul 16, 2015 at 21:44
@Robin I didn't get you, where to write the code, what is wrong in my code — Sourav Sarkar
– Sourav Sarkar, Commented Jul 16, 2015 at 21:45

score 1 · Accepted Answer · 2015-07-17 18:11:32Z

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

edited Jul 17, 2015 at 18:11

answered Jul 17, 2015 at 2:49

user1189882

Sign up to request clarification or add additional context in comments.

2 Comments

Sourav Sarkar Over a year ago

but var_dump is automatically echo the whole array. including my formated result. how to stop var_dump to display

Sourav Sarkar Over a year ago

I wrote the code in this way $a= sizeof($_POST['qty']); for($i=0;$i<$a;$i++) { echo $_POST['qty'][$i]}

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related