I need to be able to autopopulate form fields while keeping ability to add new lines:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered table-hover" id="invoiceItem">
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" type="checkbox"></th>
<th width="15%">Item No</th>
<th width="38%">Item Name</th>
<th width="15%">Quantity</th>
<th width="15%">Price</th>
<th width="15%">Total</th>
</tr>
<tr>
<td><input class="itemRow" type="checkbox"></td>
<td><input type="text" name="productCode[]" id="productCode_1" class="form-control" autocomplete="off"></td>
<td><input type="text" name="productName[]" id="productName_1" class="form-control" autocomplete="off"></td>
<td><input type="number" name="quantity[]" id="quantity_1" class="form-control quantity" autocomplete="off"></td>
<td><input type="number" name="price[]" id="price_1" class="form-control price" autocomplete="off"></td>
<td><input type="number" name="total[]" id="total_1" class="form-control total" autocomplete="off"></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete</button>
<button class="btn btn-success" id="addRows" type="button">+ Add More</button>
</div>
</div>
and my JS to add new lines is here:
var count = $(".itemRow").length;
$(document).on('click', '#addRows', function() {
count++;
var htmlRows = '';
htmlRows += '<tr>';
htmlRows += '<td><input class="itemRow" type="checkbox"></td>';
htmlRows += '<td><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"></td>';
htmlRows += '<td><input type="text" name="productName[]" id="productName_'+count+'" class="form-control" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';
htmlRows += '</tr>';
$('#invoiceItem').append(htmlRows);
});
$(document).on('click', '#removeRows', function(){
$(".itemRow:checked").each(function() {
$(this).closest('tr').remove();
});
$('#checkAll').prop('checked', false);
calculateTotal();
});
and this works great, as long as i dont want to autopopulate row (item id, name and price) using single
I know there should be a simple solution but i am staring in a blank
Related
In my HTML page I have a dynamic input table, in which when button is clicked another row gets added. I think the JavaScript is fine and everything is fine but after all the row isn't getting added after clicking.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append('<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>
I could not figure out what I am going wrong on?
Since you didn't reveal explicitly, I have to add not including JQuery library will conclude with an error object on the console with the "message" property "ReferenceError: $ is not defined".
Then if you take a look at the embedded code snippet below, you may see the only thing added to both of the rows are ids that user entered as input params. With the intended ids declared within input fields, and then using via string interpolation inside the append function, it concludes the intended behaviour.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append(`<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="${desc.value}" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="${qty.value}" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" class="btn btn-danger btn_remove">X</button></td></tr>`);
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" id="desc" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" id="qty" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>
I'm trying to add a bootstrap-select dynamically in a table defined as follow:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
Essentially my script create new row to that table when the user press a button.
The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?
This is the js code:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
and this is a working fiddle.
I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/
The code is included below.
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
I'm trying to make an invoice script with PHP+MySQL. I made my Invoice Entry Screen. Everything working perfectly. I also added "Add New Line" button.
Here is the problem, when I clicked the "Add New Line" all functions which used on first line are disabled. I do not have enough knowledge on JS.
Here are the Codes:
PHP:
<div class="table-striped" id="dataTable">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Product No</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="ekleaq">
<tr>
<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
<td>
<div class="col-xs selectContainer">
<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
<?php
while($row = $result1->fetch_assoc()){
unset($id, $name, $ax1, $ax2);
$id = $row['inv_products_id'];
$name = $row['inv_products_no'];
$ax1 = $row['inv_products_desc'];
$ax2 = $row['inv_products_price'];
echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
}
?>
</select>
</div>
</td>
<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
<td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
JS:
<script>
$("#ekle").click(function(){
$("#ekleaq")
.append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});
function ShowData(obj)
{
document.getElementById('decription1').value = obj.getAttribute('data-ax1');
document.getElementById('price1').value = obj.getAttribute('data-ax2');
}
function CalculateData(input)
{
price = document.getElementById('price1');
quantity = document.getElementById('quantity1');
amount1.value = price.value * quantity.value;
}
</script>
https://jsfiddle.net/kd4hce2o/
I have a table that has a column for adding a comment, how do i add a new row after the button was clicked?
That button is dynamically added after a new row is inserted, here is my code:
<table id="items" class="table table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="2%">AC</th>
<th width="15%">Codigo</th>
<th width="38%">Articulo</th>
<th width="15%">Precio</th>
<th width="15%">Cantidad</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
<tr id="row_1">
<td><input class="case" type="checkbox"/></td>
<td><button class="btn btn-success addrow" type="button">AC</button></td>
<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
</tr>
</tbody>
</table>
and here is my script:
var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success addrow" type="button" id="addrow_'+i+'">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '</tr>';
$('#items').append(html);
i++;
});
$(document).on("click", '.addrow', function (){
newrow = '<tr><td colspan="7"><input type="text" class="form-control"></td></tr>';
$('#items').append(newrow);
});
You need to use after. Fiddle.
$(document).on("click", '.addrow', function (){
newrow = '<tr><td colspan="7"><input type="text" class="form-control"></td></tr>';
$(this).parent().parent().after(newrow);
});
The row you are adding is broken. Also, make sure you are loading jQuery with a quick $ in console to see it is defined. If you change the above $(".addmore").on('click',function(){ to $(document).on('click', '.addrow', function(){ and get rid of the one it's using down below then you have new, good-looking rows, and each row's event listener works.
Small stuff: var html = '<tr>'; and var newrow = .... They are local vars.
PROBLEM: I want to get the row index of only the rows where there is an "AC" button. Why? cause i need the dynamically added comment input to match the index i receive in the POST.
Here is my code:
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<table id="items" class="table table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="2%">AC</th>
<th width="15%">Codigo</th>
<th width="38%">Articulo</th>
<th width="15%">Precio</th>
<th width="15%">Cantidad</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><button class="btn btn-success addrow" type="button">AC</button></td>
<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<button class="btn btn-danger delete" type="button">- eliminar</button>
<button class="btn btn-success addmore" type="button">+ Agregar</button>
</div>
And here is the script:
var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success addrow" type="button" id="addrow_'+i+'">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '</tr>';
$('#items').append(html);
i++;
});
$(document).on("click", '.addrow', function (){
var count = $(this).parent().parent().index();
newrow = '<tr><td><input class="case" type="checkbox"/></td><td colspan="7"><input type="text" name="items[comment]['+count+']" class="form-control"></td></tr>';
$(this).parent().parent().after(newrow);
});
Here is the jsfiddle: https://jsfiddle.net/1ejw1h68/
My problem is here I believe: var count = $(this).parent().parent().index();
If i add the new items and "THEN" add the "AC" everything works fine, i get the same indexes in my POST request, but if i add an item and then the comment and so on, the indexes wont match the comments.
How can i fix this?
Edit: Clarification:
When I submit the form, I get a post request with an array of items, each array has an index that matches the index of the table, my problem is that some items may or may not have a comment.
It works if i add the items and comments in order if i add 4 items first and then to the second item i add a comment i will get this in my POST:
[comment] => Array
(
[1] => this is a comment, and it should be index 1
)
But, if I for example, add an item then a comment, then a comment, then and item and so on, for the comment of the second item this is what i get:
[comment] => Array
(
[0] =>
[2] => this is a comment, and it should be index 1
[4] =>
)
As you can see, the second time, when i added the comments var count = $(this).parent().parent().index(); counted the comments rows towards the total index count, how can i prevent this? or is there a better way to accomplish this?
Here is my example which could give you an idea for your problem
//To add Dynamic Row for product
$("#add").click(function() {
var row = $("#consumptionTable tbody>tr:last").last().clone();
var oldId = Number(row.attr('id').slice(-1));
var id = 1 + oldId;
row.attr('id', 'rowformat_' + id );
row.find('#product_' + oldId).attr('id', 'product_' + id);
row.find('#quantity_' + oldId).attr('id', 'quantity_' + id);
row.find('#unit_' + oldId).attr('id', 'unit_' + id);
row.find('#errText_' + oldId).attr('id', 'errText_' + id);
$('#consumptionTable').append(row);
$('#quantity_' + id).val(""); //To clear value from cloned input
});
//To Remove the Dynamic Row
$("#remove").click(function() {
var rowCount = $('#consumptionTable tbody tr').length;
if(rowCount >1){
$( "#consumptionTable tbody> tr:last" ).remove();
}else{
alert("Cannot Remove anymore Row")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-8">
<div class="form-group">
<label for="Consumption_Detail">Consumption Detail:
<input type="button" class="dynamicBtn" id="add" value="Add Row" />
<input type="button" class="dynamicBtn" id="remove" value="Remove Row" />
</label>
<div class="table-responsive" >
<table class="table table-condensed table-bordered table-hover" id="consumptionTable">
<thead>
<tr>
<th>Product <sup>*</sup></th>
<th>Quantity <sup>*</sup></th>
<th>Unit</th>
</tr>
</thead>
<tbody id="addTbody">
<tr id="rowformat_0">
<td width="16%">
<select id="product_0">
<option value="">Select</option>
</select>
</td>
<td width="4%">
<input type="text" class="form-control" id="quantity_0" />
</td>
<td width="4%">
<select id="unit_0" class="form-control">
<option value="">Select</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Im answering my question cause i realize that what i want to do, in my case, is not the right way.
Why?.- Cause i was manually adding the indexes of my comments inputs and creating another problem in that step. what would had happen if the user deletes a row of items above the comment? the comments wouldnt match the items anymore.
Here is what i did: i created the comments input boxed dynamically along the items and hide them using 'Modal Boxes' in the same row, this way i solved all my problems in one step.
Code:
<table id="items" class="table table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="2%" style="text-align: center">AC</th>
<th width="15%">Codigo</th>
<th width="38%">Articulo</th>
<th width="15%">Precio</th>
<th width="15%">Cantidad</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><button class="btn btn-success" data-toggle="modal" data-target="#myModal" type="button">AC</button></td>
<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar comentario</h4>
</div>
<div class="modal-body">
<input type="text" name="items[comment][]" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger delete" type="button">- Eliminar</button>
<button class="btn btn-success addmore" type="button">+ Agregar</button>
Script:
var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success" data-toggle="modal" data-target="#myModal_'+i+'" type="button">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td>';
html += '<input type="text" name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<div id="myModal_'+i+'" class="modal fade" role="dialog">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal">×</button>';
html += '<h4 class="modal-title">Agregar comentario</h4>';
html += '</div>';
html += '<div class="modal-body">';
html += '<input type="text" name="items[comment][]" class="form-control">';
html += '</div>';
html += '<div class="modal-footer">';
html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
html += '</div></div></div></div>';
html += '</td>';
html += '</tr>';
$('#items').append(html);
i++;
});
and here is the jsfiddle: https://jsfiddle.net/fu39najg/
I hope this may help someone in the same position as i was.