Develop Reference

How can I correctly count rows in multirow form script?

I have problem with multirow form script modified by me. I added function who is filling ean, product_description and category_id inputs by values from ProductsData json array on the basis of manufacturer_catalog_nr value. Everything is OK when I'm adding rows singly and at once I fill manucaturer_catalog_nr. Script is filling rest of inputs. But when I add two or more rows script is filling only last ean, product_description and category_id inputs. The same problem is when remove row and add next one.
I know only that the problem is in counting but I don't have idea how can I fix this.
$(document).ready(function(){
var count = 0;
$('#add').click(function(){
count = document.getElementById("product_table_rows").rows.length;
var html_code = '';
var html_code = "<tr id='row"+(count+1)+"'>";
html_code += '<td><div class="input-group"><div class="input-group-addon">P</div><input list="manufacturer_catalog_nr_list" autocomplete="off" type="text" id="manufacturer_catalog_nr_'+count+'" name="manufacturer_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy producenta. Jeśli go nie znasz, wpisz numer dystrybutora." required /></div><div class="input-group"><div class="input-group-addon">D</div><input type="text" id="supplier_catalog_nr_'+count+'" name="supplier_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy dystrybutora. Jeśli go nie znasz wpisz numer producenta." required /></div>';
html_code += '<td><input type="text" id="ean_'+count+'" name="ean['+count+']" pattern="[0]|.{8,8}|.{13,13}" required title="Wpisz 8 lub 13 cyfr numeru EAN lub 0 jeżeli go nieznasz" class="form-control ean-filter" /></td>';
html_code += '<td><input type="text" id="quantity_'+count+'" name="quantity['+count+']" class="form-control qty-filter" required/></td>';
html_code += '<td><select id="unit_'+count+'" name="unit['+count+']" class="form-control"><option value="szt.">szt.</option><option value="m">m</option><option value="kg">kg</option><option value="kpl.">kpl.</option></select></td>';
html_code += '<td><textarea rows="2" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="product_description_'+count+'" name="product_description['+count+']" class="form-control" /></textarea></td>';
html_code += '<td><div class="input-group"><input type="text" id="price_'+count+'" name="price['+count+']" class="form-control price-filter"/><div class="input-group-addon">zł</div></div></td>';
html_code += '<td><select id="category_id_'+count+'" name="category_id" class="form-control" required></select><select onchange="this.className=this.options[this.selectedIndex].className" id="" name="" value="" class="form-control green"><option class="form-control green" selected>Normalny</option><option class="form-control red">Wysoki</option></select></td></td>';
html_code += '<td><textarea rows="1" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="assembly_'+count+'" name="assembly['+count+']" class="form-control" /></textarea></td>';
html_code += "<td><button type='button' name='remove' data-row='row"+(count+1)+"' class='btn btn-danger btn-xs remove'><span class='glyphicon glyphicon-minus'></span></button></td>";
html_code += "</tr>";
$.getJSON('../manage_categories.php', function(data) {
var html = "";
html += '<option hidden selected disabled>Wybierz kategorię</option>';
for(var option in data){
html += `<optgroup label="`+ option +`">`;
data[option].forEach(function(item){
html += `<option value="` + item["pc_option_value"] + `" >`+ item["pc_option_name"] +`</option>`
});
html += `</optgroup>`;
}
$('#category_id_'+count).append(html);
});
$('#product_table').append(html_code);
$('#manufacturer_catalog_nr_'+count).change(function () {
var input_catalog_nr = $(this).val();
var check = false;
for (var index = 0; index < ProductsData.length; ++index) {
var product = ProductsData[index];
if(product.manufacturer_catalog_nr == input_catalog_nr){
check = true;
break;
}
}
if(check == true) {
$('#ean_'+count).val(ProductsData[index].ean);
$('#product_description_'+count).val(ProductsData[index].product_description);
$('#category_id_'+count).val(ProductsData[index].category_id);
}
});
$.getScript("js/input_filters.js",function(){
Inputs_filters();
});
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
});

I found the solution:
Add an attribute data-line='+count+' in manufacturer_catalog_nr input,
Set var "input_line" with data-line value in input filling function,
var input_line = $(this).data("line");`
Add var input_line to input to be filled,
$('#ean_'+input_line).val(ProductsData[index].ean);
$('#product_description_'+input_line).val(ProductsData[index].product_description);
$('#category_id_'+input_line).val(ProductsData[index].category_id);
Enjoy.

without click append 3 rows, then click 1 row per click

I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});

You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>

How to calculate sum of multiple dynamic input fields in Javascript?

I'm trying to calculate sum of multiple dynamic input fields via javascript.
This is my main input:
<input type="text" name="price[]" id="price" value="" class="form-control" />
This is how I'm adding inputs:
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template = '<input type="text" name="price[]" id="price" class="form-control" />';
$(this).before(template);
});
After this, I have a custom function which calculate data from inputs:
function sum() {
var price = document.getElementById('price').value;
var subtotal;
}
It is calculating only one input(not the added inputs). Now, I want to calculate sum of the price of each inputs value that are showing after creating with above function.
Expected result:
input1 = 30
input2 = 30
...... = ...
subtotal = ...
So, the subtotal variable should be filled with sum of for each inputs.
Thank you.
Updated
Now, how could I calculate sum of each row and also subtotal. Below the functions you can find the expected result image link.
My full javascript function:
$(document).on('keyup keydown change', ".price, .months, #mwst, #rabatt",function () {
var months = document.getElementById('months').value;
var mwst = document.getElementById('mwst').value;
var rabatt = document.getElementById('rabatt').value;
var priceSum = 0;
var monthsSum = 0;
$('.price').each(function(){
priceSum += parseFloat(this.value);
});
$('.months').each(function(){
monthsSum += parseFloat(this.value);
});
var subtotal = priceSum * monthsSum;
var sum = priceSum * months;
var mwstValue = subtotal + 7.7 / 100 * subtotal - subtotal;
document.getElementById('subtotal').value = subtotal.toFixed(2);
document.getElementById('sum').value = subtotal.toFixed(2);
document.getElementById('mwst').value = mwstValue.toFixed(2);
var percentage = (mwst / 100) * subtotal;
var result = subtotal + mwstValue - parseFloat(rabatt);
document.getElementById('total').value = result;
});
My full dynamic inserted inputs:
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template =
'<div class="col-md-12" style="padding:0">'+
'<div class="col-md-6" style="padding-left:0px">'+
'<div class="form-group">'+
'<select style="width: 100%" id="service_id" name="service_id[]" class="service_id ">'+
'#foreach($servicesList as $sli)'+
'<option value="{{$sli->id}}">{{$sli->name}}</option>'+
'#endforeach'+
'</select>'+
'</div>'+
'</div>'+
'<div class="col-md-3" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="price[]" id="price" value="" class="form-control price" />'+
'</div>'+
'</div>'+
'<div class="col-md-1" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="months[]" id="months" value="" class="form-control months" />'+
'</div>'+
'</div>'+
'<div class="col-md-2" style="padding-right:0px">'+
'<div class="form-group">'+
'<input type="text" name="sum[]" id="sum" value="" class="form-control sum" />'+
'</div>'+
'</div>'+
'<div>'+
/*'<button type="button" class="btn btn-default btn-xs remove">Remove</button>'+*/
'</div>'+
'</div>';
enter code here
$(this).before(template);
});
Here is the link how is looking now and the expected result:
https://ibb.co/sVv3qGF

You are giving same id to multiple elements. Give class instead. Then get their sum.
var sum = 0;
$('.price').each(function(){
sum += parseFloat(this.value);
});

Try like this. use class in HTML elements and in jquery try to loop and get the value and sum it.
$('.btn-add-srvice').on('click', function(e){
e.preventDefault();
var template = '<input type="text" name="price[]" id="price" class="form-control price" />';
$(this).before(template);
});
$(document).on('keyup', ".price",function () {
var total = 0;
$('.price').each(function(){
total += parseFloat($(this).val());
})
console.log(total)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="price[]" id="price" value="" class="form-control price" />
<input type ="button" value="add" class="btn-add-srvice"/>

First, your template string for adding inputs is wrong, an ID is, as the name implies, a unique identifier and can only be used once on a page. You don't need id so remove it from the template
var template = '<input type="text" name="price[]" class="form-control" />':
Now just update the input sum function:
function sum() {
var priceElements = document.querySelectorAll('[name^=price]');
var sum = 0;
priceElements.forEach(function(element) {
sum = sum + element.value;
});
console.log(sum);
}

At the time of adding dynamic input field, you should give unique id
for each field.
Then Maintain the list of unique ids.
Iterate on that list and calculate the sum.

let subtotal;
const summOfValues = (summ, element) => summ + Number(element.value);
$('.btn-add-srvice').on('input', function(){
subtotal = $('[name="price[]"]',this).toArray().reduce(summOfValues);
$('other').val(subtotal);
})

Give each input a common class. Give, the below give code a try.
function doSum() {
var x_names = document.getElementsByClassName("x_name")
for(var i = 0; i < x_names.length; i++) {
alert(x_names[i].value)
// You can do sum of values here
}
}
<input type="text" class="some_name" name="price[]" id="price" value="">
<input type="text" class="some_name" name="somethingElse" id="somethingElse" value="">

i have add dynamic row using jquery now i want to add those column

i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})

First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps

How to only allow 10 dynamic fields to be added javascript

I have a dynamic form that add fields dynamically. I don't know where to create the rule for "maxdynamicfields: 10,"
Here is the javascript:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
</script>

Although you already are having a count rowNum, you could just use that in your function to check the count. Alternatively you could use something like this :
var count = $('p[id^=rowNum]').length;
if(count >= 10) {
// meaning there are atleast 10 dynamic elements created
}

You could avoid polluting global namespace with rowNum variable, and use this condition:
$('#itemRows > p > input').length >= 10
or a simple way:
rowNum >= 10
Secondly, your answer - the best place would be inside addRow function:
<script type="text/javascript">
var rowNum = 0;
function canAddRow(){
return $('#itemRows input').length >= 10 / /max row count is 10 here.
}
function addRow(frm) {
if(canAddRow())
return;
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>

You can add an "if" statement to the function:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
if (rowNum <10) {
rowNum++; //only increase rowNum up to 10
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
}
//Other functions
</script>

You can use rowNumber variable for this purpose
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
if(rowNumber == 10)
return;
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>

You can define a maximum value and test for it, as follows:
<script type="text/javascript">
var rowNum = 1;
var MAX = 10;
function addRow( frm ) {
if (rowNum > MAX ) {
resetQtyName( frm );
return;
}
else
{
var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
// prepare for next invocation
resetQtyName( frm );
rowNum++;
}
}
function removeRow(rnum) {
rowNum -= 1;
jQuery('#rowNum' + rnum).remove();
}
function resetQtyName( frm ){
frm.add_qty.value = '';
frm.add_name.value = '';
}
</script>