Ajax + PHP in multi row - php

Question

I created a simple webpage to add product one at a time. User only need to input the product name and all product info will be get thru AJAX. I used jQuery AJAX and it works.
But Now user want to have a button at the end of the row so that they can add many products in the same page. so when they want to add one more product, then can just click the button and a new row will appear below for them to add product.
How can I do that to pass data to PHP? what's the name for each textbox? In PHP, how do I can all these products info? In array?
How can I use ajax to put the received info to different row? IE. when user select row two product, how to make put the product info back to row two fields?
If I use AJAX, I know we can pass multiple data to server by using JSON. Can I receive multiple Data too? Now I am using separator only.
any example?
Thanks

Answer 1

There is a lot of possibilities to do that. This is one.
I dont know where you want to calculate your subtotal. And discount. It could be done in javascript or it could be done by php. It is your choice.
$(document).on("change", ".cboProdc", function(e){ // As you change the select box element
$("*").removeClass("active");//Remove active class from all elements in the DOM
$(this).parent().addClass("active");//Add active for a div container parent
//Add active for each input som form active div
$(".active .txtPrice").addClass("active");
$(".active .txtDisc").addClass("active");
$(".active .txtSugDisc").addClass("active");
$(".active .txtQt").addClass("active");
$(".active .txtStot").addClass("active");
//Make your AJAX request to PHP.
//Send to PHP id product like this $("option:selected", this).val();
var dt={
productId: $("option:selected", this).val()
};
//Ajax
var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
url: "yourServer.php",
type: "POST",
data: dt,
dataType: "json"
});
//Retrieve all information through JSON and put it in each active element.
//Ajax Done catch JSON from PHP
request.done(function(dataset){
for (var index in dataset){
txtPrice=dataset[index].Price;
txtDisc=dataset[index].Discount;
txtSugDisc=dataset[index].SugDisc;
txtQt=dataset[index].Quanty;
txtStot=dataset[index].Stot;//If you want to use php to perform the calculus
}
//JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response and pass values to acvive elements
$(".active .txtPrice").val(txtPrice);
$(".active .txtDisc").val(txtDisc);
$(".active .txtSugDisc").val(txtSugDisc);
$(".active .txtQt").val(txtQt);
$(".active .txtStot").val(txtStot);
});//End of request.done(...
});//End of $(document).on("change",
///////////////////////////////////////////////////////////////////////////////////
//Your php code
//Make your query at database
//Return like this:
$arrToJSON = array(
"Price"=>"the price",
"Discount"=>"the Discount",
"SugDisc"=>"the SugDisc",
"Quanty"=>"the Quanty",
"txtStot"=>"the txtStot",
);
return json_encode(array($arrToJSON));
//////////////////////////////////////////////////////////////////////////////////////
To save all information make a .each() http://api.jquery.com/each/ for each element, retiereve each information an use separator to send to php. Exemple "*"
In php you can use explod http://php.net/manual/en/function.explode.php
Here you have a fiddle http://jsfiddle.net/hp5kbtce/1/ to see how to select elements for each product row