I may be over complicating this... I have a jQuery script that dynamically adds form elements to be used by the user :
var i=$('table tr').length;
$(".addmore").on('click',function(){
addNewRow();
});
$(document).on('keypress', ".addNewRow", function(e){
var keyCode = e.which ? e.which : e.keyCode;
if(keyCode == 9 ) addNewRow();
});
var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html +='<span class="add_icon hide" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
html +='</td>';
html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" 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="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<input type="hidden" id="stock_'+i+'"/>';
html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
html += '</td>';
html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';
if( typeof id !== "undefined"){
$('#tr_'+id).after(html);
}else{
$('table').append(html);
}
console.log(id);
$('#caseNo_'+i).focus();
i++;
}
//to check all checkboxes
$(document).on('change','#check_all',function(){
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
//deletes the selected table rows
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
calculateTotal();
});
$(document).on('blur','.autocomplete_txt',function(){
//$('.add_icon').addClass('hide');
});
$(document).on('click','.add_icon',function(){
var add_icon_id = $(this).attr('id');
var add_icon_arr = add_icon_id.split("_");
var icon_id = add_icon_arr[add_icon_arr.length-1];
addNewRow(icon_id);
});
The result output puts a checkbox next to each line item, that you can use to delete items by line. I want to be able to select multiple elements using the checkbox, and copy those form inputs,with the user entered data to "x" amount of rows depending on what is selected.
Does anyone know if it is possible to combine .clone() with .val() in jQuery to grab the input values, and copy them to new rows? I have experimented with different ideas, and have not come up with anything that works yet... but then again, I am not well versed with jQuery.
Example Pic :
Snippet of output html from database call as requested by #Pluto :
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="20%">Item No</th>
<th width="38%">Item Name</th>
<th width="8%">Price</th>
<th width="8%">Quantity</th>
<th width="8%">Total</th>
<th width="4%">Staged</th>
<th width="12%">Location</th>
</tr>
</thead>
<tbody>
<tr id="tr_1">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="12VOLT:ALPINE:ALPINE AMPLIFIER:PDX-V9" type="text" data-type="productCode" name="data[InvoiceDetail][0][product_id]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_1"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="5 Channel Power Density Digital Amplifier" type="text" data-type="productName" name="data[InvoiceDetail][0][productName]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="351" type="number" name="data[InvoiceDetail][0][price]" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="1" type="number" name="data[InvoiceDetail][0][quantity]" id="quantity_1" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="1" type="hidden" id="stock_1" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_1" name="data[InvoiceDetail][0][stockMaintainer]" autocomplete="off"/>
<input value="1" type="hidden" id="previousQuantity_1" autocomplete="off"/>
<input value="2817" type="hidden" id="invoiceDetailId_1" autocomplete="off"/>
</td>
<td><input value="351" type="number" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" data-type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][0][location]" id="location_1" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" selected>Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
<tr id="tr_2">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="12VOLT:ALPINE:SPEAKERS-ALPINE:SPE-5000" type="text" data-type="productCode" name="data[InvoiceDetail][1][product_id]" id="itemNo_2" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_2"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="Alpine Type E 5.25" type="text" data-type="productName" name="data[InvoiceDetail][1][productName]" id="itemName_2" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="41" type="number" name="data[InvoiceDetail][1][price]" id="price_2" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="1" type="number" name="data[InvoiceDetail][1][quantity]" id="quantity_2" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="6" type="hidden" id="stock_2" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_2" name="data[InvoiceDetail][1][stockMaintainer]" autocomplete="off"/>
<input value="1" type="hidden" id="previousQuantity_2" autocomplete="off"/>
<input value="2818" type="hidden" id="invoiceDetailId_2" autocomplete="off"/>
</td>
<td><input value="41" type="number" id="total_2" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" data-type="checkbox" name="data[InvoiceDetail][1][staged]" id="staged_2" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][1][location]" id="location_2" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" selected>Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
<tr id="tr_3">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="12VOLT:ALPINE:HEADUNIT-ALPINE:CDE-143BT" type="text" data-type="productCode" name="data[InvoiceDetail][2][product_id]" id="itemNo_3" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_3"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="Cd/Usb Receiver W/Advanced Bluetooth By Alpine" type="text" data-type="productName" name="data[InvoiceDetail][2][productName]" id="itemName_3" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="93" type="number" name="data[InvoiceDetail][2][price]" id="price_3" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="1" type="number" name="data[InvoiceDetail][2][quantity]" id="quantity_3" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="0" type="hidden" id="stock_3" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_3" name="data[InvoiceDetail][2][stockMaintainer]" autocomplete="off"/>
<input value="1" type="hidden" id="previousQuantity_3" autocomplete="off"/>
<input value="2819" type="hidden" id="invoiceDetailId_3" autocomplete="off"/>
</td>
<td><input value="93" type="number" id="total_3" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" checked="checked" data-type="checkbox" name="data[InvoiceDetail][2][staged]" id="staged_3" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][2][location]" id="location_3" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" >Used</option>
<option value="RTS" selected>RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
<tr id="tr_4">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="12VOLT:ALPINE:SPEAKERS-ALPINE:SPE-5000" type="text" data-type="productCode" name="data[InvoiceDetail][3][product_id]" id="itemNo_4" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_4"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="Alpine Type E 5.25" type="text" data-type="productName" name="data[InvoiceDetail][3][productName]" id="itemName_4" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="41" type="number" name="data[InvoiceDetail][3][price]" id="price_4" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="1" type="number" name="data[InvoiceDetail][3][quantity]" id="quantity_4" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="6" type="hidden" id="stock_4" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_4" name="data[InvoiceDetail][3][stockMaintainer]" autocomplete="off"/>
<input value="1" type="hidden" id="previousQuantity_4" autocomplete="off"/>
<input value="2820" type="hidden" id="invoiceDetailId_4" autocomplete="off"/>
</td>
<td><input value="41" type="number" id="total_4" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" checked="checked" data-type="checkbox" name="data[InvoiceDetail][3][staged]" id="staged_4" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][3][location]" id="location_4" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" >Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" selected>LAJ</option>
</select>
</td>
</tr>
<tr id="tr_5">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="12VOLT:ALPINE:HEADUNIT-ALPINE:CDE-143BT" type="text" data-type="productCode" name="data[InvoiceDetail][4][product_id]" id="itemNo_5" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_5"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="Cd/Usb Receiver W/Advanced Bluetooth By Alpine" type="text" data-type="productName" name="data[InvoiceDetail][4][productName]" id="itemName_5" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="93" type="number" name="data[InvoiceDetail][4][price]" id="price_5" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="1" type="number" name="data[InvoiceDetail][4][quantity]" id="quantity_5" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="0" type="hidden" id="stock_5" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_5" name="data[InvoiceDetail][4][stockMaintainer]" autocomplete="off"/>
<input value="1" type="hidden" id="previousQuantity_5" autocomplete="off"/>
<input value="2821" type="hidden" id="invoiceDetailId_5" autocomplete="off"/>
</td>
<td><input value="93" type="number" id="total_5" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" data-type="checkbox" name="data[InvoiceDetail][4][staged]" id="staged_5" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][4][location]" id="location_5" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" selected>Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
<tr id="tr_6">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="" type="text" data-type="productCode" name="data[InvoiceDetail][5][product_id]" id="itemNo_6" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_6"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="" type="text" data-type="productName" name="data[InvoiceDetail][5][productName]" id="itemName_6" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="0" type="number" name="data[InvoiceDetail][5][price]" id="price_6" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="0" type="number" name="data[InvoiceDetail][5][quantity]" id="quantity_6" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="" type="hidden" id="stock_6" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_6" name="data[InvoiceDetail][5][stockMaintainer]" autocomplete="off"/>
<input value="0" type="hidden" id="previousQuantity_6" autocomplete="off"/>
<input value="2822" type="hidden" id="invoiceDetailId_6" autocomplete="off"/>
</td>
<td><input value="0" type="number" id="total_6" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" data-type="checkbox" name="data[InvoiceDetail][5][staged]" id="staged_6" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][5][location]" id="location_6" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" >Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
<tr id="tr_7">
<td> <input class="case" type="checkbox"/> </td>
<td class="prod_c">
<input value="" type="text" data-type="productCode" name="data[InvoiceDetail][6][product_id]" id="itemNo_7" class="form-control autocomplete_txt" autocomplete="off">
<span class="add_icon hide" id="add_icon_7"> <i class="fa fa-plus-circle"></i></span>
</td>
<td><input value="" type="text" data-type="productName" name="data[InvoiceDetail][6][productName]" id="itemName_7" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input value="0" type="number" name="data[InvoiceDetail][6][price]" id="price_7" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td>
<input value="0" type="number" name="data[InvoiceDetail][6][quantity]" id="quantity_7" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<input value="" type="hidden" id="stock_7" autocomplete="off"/>
<input value="0" type="hidden" id="stockMaintainer_7" name="data[InvoiceDetail][6][stockMaintainer]" autocomplete="off"/>
<input value="0" type="hidden" id="previousQuantity_7" autocomplete="off"/>
<input value="2823" type="hidden" id="invoiceDetailId_7" autocomplete="off"/>
</td>
<td><input value="0" type="number" id="total_7" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="checkbox" data-type="checkbox" name="data[InvoiceDetail][6][staged]" id="staged_7" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<select value="" name="data[InvoiceDetail][6][location]" id="location_7" class="form-control autocomplete_txt" autocomplete="off">
<option value="Used" >Used</option>
<option value="RTS" >RTS</option>
<option value="LAJ" >LAJ</option>
</select>
</td>
</tr>
</tbody>
</table>
How about just storing the names and values? Here's an example that would do the job:
function getValues(id){
var inputs=$('#tr_'+id).find('select,input,textarea').filter('[name]');
var values={};
for(var i=0; i<inputs.length;i++){
var cur=inputs[i];
// Get the end of the name attribute, to leave out the unique id/index
values[cur.name.match(/\[\w+]$/)||cur.name] = $(cur).is(':checkbox, :radio') ? cur.checked : cur.value;
}
return values;
}
function setValues(id,values){
var inputs=$('#tr_'+id);
for(var i in values){
var cur=inputs.find('[name$="'+i+'"]');
if(cur.is(':checkbox, :radio')) {
cur.prop('checked', values[i]);
} else {
cur.val(values[i]);
}
}
}
//copies the selected table rows to new ones
$(".copy").on('click', function() {
var origs=$('.case:checkbox:checked');
for(var a=0; a<origs.length; a++) {
// Places copy at end
addNewRow();
var arr = origs.closest('tr')[a].id.split('_');
var id = arr[arr.length-1];
var dat = getValues(id);
setValues(i-1, dat);
}
$('#check_all').add(origs).prop("checked", false);
});
I set it up to take ID's so that you can choose where you want the row inserted/data copied to. For now, it just copies the values to rows added at the end.
Here's a working example: http://jsfiddle.net/y68wuj08/1/
As #Pluto points out below I didn't solve the problem. I edited to at least reverse the array properly, though, and this was a fun little foray into jQuery since it'd been a while.
$.fn.reverse = [].reverse; //why doesn't jQuery just do this anyway?
$("button.copy").on('click', function(){
var cases = $("input.case:checkbox:checked");
var last = cases.last().closest("tr");
cases.reverse().each(function(index){
var newRow = $(this).closest("tr").clone();
last.after(newRow);
});
});
Related
I'm trying to generate objects from array variants using jquery but i didn't get proper solution for that can anyone help?
here is my HTML code.
<table>
<tr class="variants">
<td>
100g/
<input id="100g" name="variant_name" type="hidden" value="100g">
m/
<input id="m" name="variant_name" type="hidden" value="m">
blue
<input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>...</td>
<td>...</td>
</tr>
<tr/>....</tr>
<tr/>....</tr>
I need output something like that.
{
"100g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
},
"200g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
}}
here is fiddle link for more information.
https://jsfiddle.net/fhLqsz3w/
It would be greatly appreciated if someone helped me
You can iterate through each tr of the table. Iterate through all the input tag of a row. For all the hidden input, if the key (value is the value of the input element) is present, move to next object otherwise create an object corresponding to that key. For all the non-hidden field, accumulate values in an object accumulator, after exiting the loop, now add the non-hidden object to the original object.
$('#update_btn').click(function(e) {
var obj = {};
$('table tbody tr').each(function() {
var temp = obj;
var notHidden = {};
$(this).find('input').each(function(i,e) {
if(e.type=="hidden"){
if(!(e.value in temp))
temp[e.value] = {};
temp = temp[e.value];
}
//added textbox value
if(e.type!="hidden"){
notHidden[e.getAttribute('name')] = e.value;
}
})
Object.assign(temp, notHidden);
});
console.log(obj);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-condensed" id="variants">
<tbody>
<tr><th> Variant </th> <th> SKU </th><th>Cross Price and Price</th> <th> Qty</th> <th> Image Link/ID </th></tr>
<tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr></tbody>
</table>
<button id="update_btn">click
</button>
i am trying to calculate the total price for each new item added. I have created an onchange function that will calculate the total price based on the quantity inputted by the user, so every time the user changes the quantity, the price changes. I have tried running my code however it doesn't seem to be calculating and displaying the total in its corresponding text box.
function getTotal($i){
var price = document.getElementById('priceper_'+$i+'').value;
var per_pack = document.getElementById('per_pack_'+$i+'').value;
var quantity = document.getElementById('quantity_'+$i+'').value;
document.getElementById('subtotal_'+$i+'').value = ((price/per_pack)*quantity);
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_0" id="description_" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
<td><input type="text" name="priceper_0" id="priceper_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_" size="10" maxlength="9" value="" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" onChange="getTotal(<?php echo $i;?>);"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_" size="15" maxlength="9" value="" /></td>
</tr>
<?php
for($i=1; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" onChange="getTotal('.$i.');" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
</table>
Something like this
function getTotal() {
var total = 0;
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
var price = document.getElementById('priceper_'+i).value;
var per_pack = document.getElementById('per_pack_'+i).value;
var quantity = document.getElementById('quantity_'+i).value;
var subtotal = (price/per_pack)*quantity;
document.getElementById('subtotal_'+i).value=subtotal.toFixed(2);
total+=subtotal;
}
document.getElementById("total").value=total.toFixed(2);
}
window.onload=function() {
for (var i=0,n=document.querySelectorAll(".multipp").length; i<n;i++) {
document.getElementById('quantity_'+i).onkeyup=getTotal;
}
getTotal();
}
<table>
<tr>
<td>Paper</td>
<td align="center">Price</td>
<td align="center">Per Pack</td>
<td align="center">Quantity</td>
<td align="center">Sub Total</td>
</tr>
<!-- here you loop in your PHP from 0 to 9 if you want 10 fields -->
<tr class="multipp">
<td><input type="text" name="description_0" id="description_'" size="85" maxlength="70" value="desc 0" /></td>
<td><input type="text" name="priceper_0" id="priceper_0" size="10" maxlength="9" value="11" /></td>
<td><input type="text" name="per_pack_0" id="per_pack_0" size="10" maxlength="9" value="1" /></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_0" id="subtotal_0" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr class="multipp">
<td><input type="text" name="description_1" id="description_1" size="85" maxlength="70" value="desc 1" /></td>
<td><input type="text" name="priceper_1" id="priceper_1" size="10" maxlength="9" value="22" /></td>
<td><input type="text" name="per_pack_1" id="per_pack_1" size="10" maxlength="9" value="2" /></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="10" maxlength="9" value="0"/></td>
<td><input type="text" name="subtotal_1" id="subtotal_1" size="15" maxlength="9" value="0.00" /></td>
</tr>
<tr><td colspan=4> </td><td><input type="text" id="total" value="0.00" />
</table>
The PHP:
<?php
for($i=0; $i<10; $i++)
{
echo '<tr class="multipp">';
echo '<td><input type="text" name="description_'.$i.'" id="description_'.$i.'" size="85" maxlength="70" value="'.htmlspecialchars($description[$i]).'" /></td>';
echo '<td><input type="text" name="priceper_'.$i.'" id="priceper_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="per_pack_'.$i.'" id="per_pack_'.$i.'" class="txt" size="10" maxlength="9" value="'.htmlspecialchars($priceper[$i]).'" /></td>';
echo '<td><input type="text" name="quantity_'.$i.'" id="quantity_'.$i.'" size="10" maxlength="9" value="'.htmlspecialchars($quantity[$i]).'" />`</td>';
echo '<td><input type="text" name="subtotal_'.$i.'" id="subtotal_'.$i.'" size="15" maxlength="9" value="'.htmlspecialchars($subtotal[$i]).'" /></td>';
echo '</tr>';
}
?>
I have got the following table with input fields:
<td class="col-sm-4" ng-bind="getOrderNameForHourRegistration(selectedProject)"></td>
<td class="col-sm-1">
<input ng-model="addMonday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addTuesday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addWednesday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addThursday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addFriday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addSaturday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input ng-model="addSunday" class="col-sm-1 form-control" type="number" min="0" max="8" value="" ng-maxlength="1" />
</td>
<td class="col-sm-1">
<input class="col-sm-1 form-control" disabled type="number" value="{{addMonday + addTuesday + addWednesday + addThursday + addFriday + addSaturday + addSunday}}" />
</td>
This:
value="{{addMonday + addTuesday + addWednesday + addThursday + addFriday + addSaturday + addSunday}}" /></td>
Works perfect on chrome and firefox. But i cant get it to work on IE and Edge.
It just doesn't shows the value not even zero. No value at all...
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.