how to post dynamically generated html table when form submitted? - php

Question

I have a form that will contain a html table which allows users can add or delete rows from it. That will works fine .
/*add row*/
function add_Items(itemtypeid, itemid, reqqty) {
var mode = 1;
var pstSettings = {
url: 'ajax_Items/' + itemid + '/' + mode
callback: function (data) {
var dyntd = "";
var hidval = "";
var $response = $(data);
var resitmname = $response.filter('#Item_Name').text();
var resitmdesc = $response.filter('#Item_Descrip').text();
dyntd = "<td><label>" + itemid + "</label></td>";
dyntd += "<td><label>" + resitmname + "</label></td>";
dyntd += "<td><label>" + resitmdesc + "</label></td>";
dyntd += "<td><label>" + reqqty + "</label></td>";
hidval += '<input type="hidden" name="itemid" value=' + itemid + ' />';
hidval += '<input type="hidden" name="reqitem" value=' + reqqty + ' />';
dyntd += '<td>' + hidval + '<input type="button" name="min" class="minus" value="-" />';
$('.item-result-table tr:last').after('<tr>' + dyntd + '</tr>');
}
};
post_Call(pstSettings);
}
}
/* delete row */
$(document).ready(function () {
$('.item-result-table').delegate('.minus', 'click', function (e) {
$(this).parent().parent().remove();
});
});
But now my problem is how to submit the html table in a form, because of all are html tags not input type tags . I have added a hidden tag . But it also creates problem that it only takes the first element , others are ignored. Is any other method existing to submit this html table data?

Answer 1

The reason you are only getting one input is because you defined it wrong, you need to define it as array:
<input type="hidden" name="itemid[]" value=' + itemid + ' />
<input type="hidden" name="reqitem[]" value=' + reqqty + ' />'
and then in PHP:
$_POST['itemid'][0];

Answer 2

I think that you could use the $.ajax jquery function. You can serialize all your inputs in the form like this:
$("#btn_submit").on('click', function() {
$.ajax({
url: $(this).closest("#div_content").find("#form").attr( 'action' ),
type: 'post',
data: $(this).closest("#div_content").find("#form").serialize(),
}).done( function(msg) {
//console.log("ok");
}).fail( function(jqXHR, textStatus) {
//console.log("fail");
});
});
With the "serialize" you can send all the variables and on the controller you can read the variables with $_POST and the name of the input.