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>
Related
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
why not working this code?
Maybe someone knows?
Table:
$(document).ready(function() {
var postURL = "<?php echo url('invoices/create') ?>";
var i = 1;
// Add inputs
$('#add').click(function() {
i++;
$('#dynamic_field').append('' +
'<tr id="row' + i + '">' +
'<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>' +
'<td><button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove">X</button></td></tr>');
});
// Remove inputs
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$.ajaxSetup({
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>
<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>
<td><button type="button" name="add" id="add" class="btn btn-sm btn-success">+</button></td>
</tr>
</tbody>
</table>
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 am working on small project.. In one module, i need to do some entries using multiple forms. and i need that added form data(respective table data) to be displayed in same page after adding each value.
So, that user will get to know what data he inserted.
Pls look at the code.
<div class="container">
<div class="row">
<br><br>
<h4> School Name: <?php echo $sn; ?>
</h4>
</div>
</div>
<div class="container col-md-offset-1 col-md-7">
<h3>Budget/Students Count:</h3>
<br>
<ul class="nav nav-tabs">
<li class="active">K6</li>
<li>K7</li>
<li>K8</li>
<li>K9</li>
<li>K10</li>
<li>K11 SC</li>
<li>K12 SC</li>
<li>K11 NSC</li>
<li>K12 NSC</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form name="add_name" id="add_name" class="col-md-5">
<table class="table" id="dynamic_field">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
<td><label style="font-size:10px;"></label></td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu1" class="tab-pane fade">
<form name="add_name1" id="add_name1" class="col-md-5">
<table class="table" id="dynamic_field1">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu2" class="tab-pane fade">
<form name="add_name2" id="add_name2" class="col-md-5">
<table class="table" id="dynamic_field2">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
Script:
$(document).ready(function() {
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
$(function() {
var i = 1;
$("#add").click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#add1").click(function() {
i++;
$('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
$('#submit1').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name1').serialize(),
success: function(data) {
alert(data);
$('#add_name1')[0].reset();
}
});
});
In section.php i have written sql query insertion.
Now what i need is, i need this entered data to be displayed in same page. and table should be updated every time when i add new value.
$.ajax({
type:"GET",
url:"path/to/file",
data: 'your data',
success:function(html){
$('.response').html(html); //this return response to your page
}
})
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.