Dynamic form field with jquery not post values to php - php

Question

i had form that is add some fields via jquery when i click " add new " button it will update a dom , with input fields . Input fields are using a array as a name , when i click submit button , values did not post to php, only static form values are posted but not dynamically generated input values .
My fiddle is http://jsfiddle.net/4L9Rc/
It will demonstrate clearly how is my form working .
HTML
<div class="row">
<div class="col-md-12">
<form method="POST" action="http://fabtech.com/invoices/create" accept-charset="UTF-8" role="form" class="form-horizontal re-form form-inv"><input name="_token" type="hidden" value="aLngVzB1UIlY6cEedbAh55tirXGGkYJl78BL0CRN"> <legend>Invoice Details</legend>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Invoice No</label>
<div class="col-md-7">
<input type="text" placeholder="Enter invoice no" class="form-control" name="inv_no" value=""">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Invoice date</label>
<div class="col-md-7">
<input type="text" placeholder="Enter text" class="form-control date-pic" name="inv_date" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Customer</label>
<div class="col-md-7">
<select class="form-control" name="inv_customer">
<option value="">- Select Customer -</option>
<option value="suresh">suresh</option>
<option value="ABC210">ABC210</option>
<option value="QWERTy123DF">QWERTy123DF</option>
<option value="CUS002">CUS002</option>
<option value="CUS0023">CUS0023</option>
<option value="CUS003">CUS003</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PO No</label>
<div class="col-md-7">
<input type="text" placeholder="Enter text" class="form-control" name="po_no" value="">
</div> </div>
<div class="form-group">
<label class="col-md-4 control-label">PO date</label>
<div class="col-md-7">
<input type="text" placeholder="DD/MM/YYY" class="form-control date-pic" name="po_date" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Vendor code</label>
<div class="col-md-7">
<input type="text" placeholder="Enter Vendor Code" class="form-control" name="vendor_code" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">75% abatement value</label>
<div class="col-md-1">
<input type="checkbox" class="form-control sf" name="sf">
</div>
<div class="col-md-6 sfbox" style="display:none">
<input type="text" class="form-control sfboxval" readonly="">
</div> </div>
<div class="form-group">
<label class="col-md-4 control-label">25% Taxable Value</label>
<div class="col-md-1">
<input type="checkbox" class="form-control tf" name="tf">
</div>
<div class="col-md-6 tfbox" style="display:none" >
<input type="text" class="form-control tfboxval" readonly="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Tax in %</label>
<div class="col-md-7">
<input type="text" placeholder="" class="form-control tax" name="tax" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Grand Total</label>
<div class="col-md-7">
<input type="text" placeholder="" class="form-control grandtotal" readonly="" name="grand_total">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<legend>Particulars
<a class="btn btn-xs btn-success" id="apm"><i class="icon-plus"></i> Add new</a>
</legend>
<table id="apmr" width="69%" class="table table-striped table-bordered table-hover invoice">
<thead>
<tr>
<th width="3%">SL No</th>
<th width="25%">Description</th>
<th width="8%">Unit</th>
<th width="8%">Qty</th>
<th width="10%">Unit rate</th>
<th width="9%"> Amount</th>
</tr>
</thead>
<tbody class="roo">
<tr>
<td valign="center"> 1 </td>
<td class="tr_nt"><input type="text" name="parti[1][desc]" class="part"></td>
<td class="tr_nt"><input type="text" name="parti[1][unit]" class="part"></td>
<td class="tr_qty into"><input type="text" name="parti[1][qty]" class="part qty"></td>
<td class="tr_urate into"><input type="text" name="parti[1][urate]" class="part ur"></td>
<td class="tr_amt"><input type="text" name="parti[1][amount]" readonly="" class="part tot"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
</td>
<td colspan="2">
Particular's Total: Rs <span class="parttotal"></span>
</td>
</tr>
</tfoot>
</table>
<p style="text-align: center;padding-top: 5px;"><input name="submit" class="btn-lg btn-primary" type="submit" value="View Invoice"></p>
</form> </div>
</div>
</div>
</div>
Javascript
//invoice particulars
var val;
$("#apm").click(function(event) {
//event.preventDefault();
//var preData = $("#apmr tr:last").html();
//console.log(preData);
//
//$("#apmr tr:last").after('<tr>' + preData + '</tr>');
var lasttd = $('.roo tr:last td:first').text();
val = parseInt(lasttd) + 1;
$(".roo tr:last").after(' <tr> <td valign="center"> ' + val + ' </td> <td class="tr_nt"><input type="text" name="parti[' + val + '][desc]" class="part"></td> <td class="tr_nt"><input type="text" name="parti[' + val + '][unit]" class="part"></td> <td class="tr_qty into"><input type="text" name="parti[' + val + '][qty]" class="part qty"></td> <td class="tr_urate into"><input type="text" name="parti[' + val + '][urate]" class="part ur"></td> <td class="tr_amt"><input type="text" name="parti[' + val + '][amount]" readonly class="part tot" ></td></tr>');
// val = val + 1;
return false;
})
var gt;
$("table.invoice").on("change", '.qty, .ur', function(event) {
calculateRow($(this).closest("tr"));
calculateTotal();
});
function calculateRow(row) {
var price = +row.find('.qty').val();
var qty = +row.find('.ur').val();
row.find('.tot').val((price * qty).toFixed(2));
}
function calculateTotal() {
var Total = 0;
$("table.invoice").find('.tot').each(function() {
Total += +$(this).val();
});
$(".parttotal").text(Total.toFixed(2));
calgrand();
}
$(".re-form").on('change', '.tax,.tf,.sf', function(event) {
calgrand();
})
function calgrand() {
var taxVal = $('.tax').val();
var parVal = $(".parttotal").text();
var result = parVal - taxVal * parVal / 100;
$('.grandtotal').val(result.toFixed(2));
if ($('.tf').is(':checked')) {
var resulttf = parVal - 25 * parVal / 100;
$('.tfboxval').val(resulttf.toFixed(2));
var result = result - resulttf;
$('.grandtotal').val(result.toFixed(2));
}
if ($('.sf').is(':checked')) {
//alert('entered');
var resultsf = parVal - 75 * parVal / 100;
$('.sfboxval').val(resultsf.toFixed(2));
var result = result - resultsf;
$('.grandtotal').val(result.toFixed(2));
}
}
$('.tf').click(function() {
$(".tfbox").toggle(this.checked);
});
$('.sf').click(function() {
$(".sfbox").toggle(this.checked);
});
in php i had
print_r($_POST['parti']);
its give out put
Array
(
[1] => Array
(
[desc] =>
[unit] =>
[qty] =>
[urate] =>
[amount] =>
)
)
but i need
Array
(
[1] => Array
(
[desc] =>
[unit] =>
[qty] =>
[urate] =>
[amount] =>
)
[2] => Array
(
[desc] =>
[unit] =>
[qty] =>
[urate] =>
[amount] =>
)
[3] => Array
(
[desc] =>
[unit] =>
[qty] =>
[urate] =>
[amount] =>
)
....
)
javascript

Answer 1

Please indent your code next time. Too many changes to make in your form. At the line where you have "Enter invoice no." you have left an open quote at value=""" which is a big mistake.
Overwrite your HTML code with this:
<div class="matter">
<div class="container">
<form method="POST" action="http://fabtech.com/invoices/create" accept-charset="UTF-8" role="form" class="form-horizontal re-form form-inv">
<input name="_token" type="hidden" value="aLngVzB1UIlY6cEedbAh55tirXGGkYJl78BL0CRN">
<div class="row">
<div class="col-md-12">
<legend>Invoice Details</legend>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Invoice No</label>
<div class="col-md-7">
<input type="text" placeholder="Enter invoice no" class="form-control" name="inv_no" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Invoice date</label>
<div class="col-md-7">
<input type="text" placeholder="Enter text" class="form-control date-pic" name="inv_date" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Customer</label>
<div class="col-md-7">
<select class="form-control" name="inv_customer">
<option value="">- Select Customer -</option>
<option value="suresh">suresh</option>
<option value="ABC210">ABC210</option>
<option value="QWERTy123DF">QWERTy123DF</option>
<option value="CUS002">CUS002</option>
<option value="CUS0023">CUS0023</option>
<option value="CUS003">CUS003</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PO No</label>
<div class="col-md-7">
<input type="text" placeholder="Enter text" class="form-control" name="po_no" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PO date</label>
<div class="col-md-7">
<input type="text" placeholder="DD/MM/YYY" class="form-control date-pic" name="po_date" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Vendor code</label>
<div class="col-md-7">
<input type="text" placeholder="Enter Vendor Code" class="form-control" name="vendor_code" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">75% abatement value</label>
<div class="col-md-1">
<input type="checkbox" class="form-control sf" name="sf">
</div>
<div class="col-md-6 sfbox" style="display:none">
<input type="text" class="form-control sfboxval" readonly="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">25% Taxable Value</label>
<div class="col-md-1">
<input type="checkbox" class="form-control tf" name="tf">
</div>
<div class="col-md-6 tfbox" style="display:none">
<input type="text" class="form-control tfboxval" readonly="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Tax in %</label>
<div class="col-md-7">
<input type="text" placeholder="" class="form-control tax" name="tax" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Grand Total</label>
<div class="col-md-7">
<input type="text" placeholder="" class="form-control grandtotal" readonly="" name="grand_total">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<legend>Particulars <a class="btn btn-xs btn-success" id="apm"><i class="icon-plus"></i> Add new</a>
</legend>
<table id="apmr" width="69%" class="table table-striped table-bordered table-hover invoice">
<thead>
<tr>
<th width="3%">
SL No
</th>
<th width="25%">
Description
</th>
<th width="8%">
Unit
</th>
<th width="8%">
Qty
</th>
<th width="10%">
Unit rate
</th>
<th width="9%">
Amount
</th>
</tr>
</thead>
<tbody class="roo">
<tr>
<td valign="center">
1
</td>
<td class="tr_nt">
<input type="text" name="parti[1][desc]" class="part">
</td>
<td class="tr_nt">
<input type="text" name="parti[1][unit]" class="part">
</td>
<td class="tr_qty into">
<input type="text" name="parti[1][qty]" class="part qty">
</td>
<td class="tr_urate into">
<input type="text" name="parti[1][urate]" class="part ur">
</td>
<td class="tr_amt">
<input type="text" name="parti[1][amount]" readonly="" class="part tot">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
</td>
<td colspan="2">
Particular's Total: Rs <span class="parttotal"></span>
</td>
</tr>
</tfoot>
</table>
<p style="text-align: center;padding-top: 5px;">
<input name="submit" class="btn-lg btn-primary" type="submit" value="View Invoice">
</p>
</div>
</div>
</form>
</div>
</div>
Your mistake was that your <form> tag was closed in the wrong place. Remember to always place tags in such a way that always the inner tags close first.