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="">
Related
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.
I have dynamically created table with <tr> <td> <inputs>, problem is, when I click first <td> input and I click on to the next td input, jquery blur event fires multiple times. Even after using event.stopImmediatePropagation() and event.preventDefault(), I couldn't able to prevent the multiple firing on blur event and also I used flag set to false to prevent the firing, but I couldn't.
Is there any other way to solve this problem?
for(var i=0;i< data.supplierdetails.length;i++){
var j = (Math.floor(Math.random() * 100000000) + 100000000).toString().substring(1);
supplierdetailshtml += '<tr data-id="'+j+'">';
var description = data.supplierdetails[i].description;
supplierdetailshtml+= '<td><input type="text" name="rawproductname[]" id="rawproductname" value ="'+description+'" class="form-control rawproductname" readonly="true"/></td>';
supplierdetailshtml+= '<td><input type="text" name="hsncode[]" id="hsncode" class="form-control hsncode"/></td>';
var quantity = data.supplierdetails[i].quantity;
supplierdetailshtml+= '<td><input type="text" name="rawproductquantity[]" id="rawproductquantity_'+j+'" value ="'+quantity+'" class="form-control rawproductquantity" readonly="true"/></td>';
var unitcode = data.supplierdetails[i].unitcode;
supplierdetailshtml+= '<td><input type="text" name="rawproductunitcode[]" id="rawproductunitcode" value ="'+unitcode+'" class="form-control rawproductunitcode" readonly="true"/></td>';
supplierdetailshtml+='<td><input type="text" name="rawproductrate[]" id="rawproductrate_'+j+'" value="0.00" class="form-control rawproductrate"/></td>';
supplierdetailshtml+='<td><input type="text" name="rawproductprice[]" id="rawproductprice_'+j+'" value="0.00" class="form-control rawproductprice"/></td>';
supplierdetailshtml+= '<td><input type="text" name="rawproductgst[]" id="rawproductgst_'+j+'" value="0.00" class="form-control rawproductgst"/></td></tr>';
}
$(document).on('blur','.rawproductrate',function(event){
debugger;
var tr_id = $(this).closest('tr').data('id');
//alert("Data ID"+tr_id);
var rawproductquantity = $("#rawproductquantity_"+tr_id).val();
//alert("Raw Product Quantity"+rawproductquantity);
var rawproductrate = $("#rawproductrate_"+tr_id).val();
//alert("Raw Product rate"+rawproductrate);
if (rawproductrate==0 || rawproductrate=="") {
alert("Raw Product Rate Cannot be Zero");
}
var rawproductprice = parseFloat(rawproductrate*rawproductquantity).toFixed(2);
if(isNaN(rawproductprice) || rawproductprice==""){
var rawproductprice_decimal = parseFloat(rawproductprice || 0).toFixed(2);
$("#rawproductprice_"+tr_id).val(rawproductprice_decimal);
}
$("#rawproductprice_"+tr_id).val(rawproductprice);
$('.rawproductrate').off('blur');
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
html code we can get the value
<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />
i can try with this in jQuery i can get only html value result, after add new row i can't get the value
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item1</td>';
cols += '<td><input type="text" class="form-control" name="value1[]" id="value2' + counter + '"></td>';
cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="total_"' + 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++;
});
$("#value2").keyup(function () {
var value1 = $("#value1").val();
var value2 = $("#value2").val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
$("#total").val(totalincome);
})
});
First of all the id must be unique in the same document, else you'll end up with incorrect HTML code, so you need to replace the ids with common classes instead in your code as a first step.
Then you need to use event delegation to attach the event to your inputs since the must of them are created dynamically with the JS code.
I prefer the use of input event instead of keyup when you track the user inputs, so the event will be something like:
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
});
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item ' + counter + '</td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></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++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
<tr>
<td>Item </td>
<td><input type="text" class="form-control calculated_value" name="value1[]"></td>
<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
</tr>
</table>
<button id="addrow">Add row</button>
I have tried this one, may be this is what you are looking into.
please take a look at the snippet.
jQuery(document).ready(function () {
var count = 1;
jQuery('#add').on('click', function(){
var el = `<section id="inpFields">
<input type="text" name="value1[]" id="value`+count+`" placeholder="value `+count+`"/>
<input type="text" name="value2[]" id="value2`+count+`" placeholder="value `+count+`"/>
<input type="text" name="total[]" id="total`+count+`" placeholder="total" />
<button class="totalBtn" data-id="`+count+`">Total</button>
</section>`;
jQuery('#inpFields').append(el);
count++;
});
jQuery('#add').click();
jQuery(document).on('click', '.totalBtn', function(){
var i = this.dataset.id;
var value1 = jQuery('#value'+i).val();
var value2 = jQuery('#value2'+i).val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
jQuery('#total'+i).val(totalincome);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="add">Add Fields</button>
<section id="inpFields">
</section>
I am looking to make a set of 3 form inputs for a phone number that automatically focuses on the next set of digits when the first is full.
My form is this string of HTML:
myLayer.eachLayer(function(layer) {
// here you call `bindPopup` with a string of HTML you create - the feature
// properties declared above are available under `layer.feature.properties`
var content = '<div class="tooltip-header">Store Name<\/div>' +
'<div class="tooltip-address">' + layer.feature.properties.address1 + '<div\/>' +
'<div class="tooltip-address">' + layer.feature.properties.address2 + '<div\/>' +
'<br>'+
'<div class="tooltip-phoneLabel">' + layer.feature.properties.phoneLabel + '<div\/>'+
'<br>'+
'<div class="phone-input">'+
'<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555"> '+
'<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555"> '+
'<input class="phone-input" name="phone-input" type="tel" size="4" maxlength="4" placeholder="5555">'+
'<\/div>';
layer.bindPopup(content);
});
Use the following example to achieve what you want:
$(document).ready(function(){
$('body').on('keyup', 'input.phone-input', function(){
if($(this).val().length === this.size){
var inputs = $('input.phone-input');
inputs.eq(inputs.index(this) + 1).focus();
}
});
});
DEMO
I have 3 textboxes.product of two textboxes are get into another textbox automatically.the fields are quantity and per/unit.then these two is multiplied into the field amount in each click.But the problm is i got the product in first click only..
js
var new_string='<div class="form-group" id="exp_'+unqid+'">'
+'<label for="exampleInputPassword1">'+name+'</label> </br>'
+'<input name="quantity_'+unqid+'" type="text" id="quantity" style="margin-right:20px;" class="form-con" placeholder="Quantity" required>'
+'<input name="perunit_'+unqid+'" type="text" id="perunit" style="margin-right:20px;" onchange="getTotalAmount('+unqid+')" class="form-con" placeholder="Per/unit" required>'
+'<input name="amount_'+unqid+'" type="text" id="amount" class="form-con" placeholder="Amount" required></div>';
$("#create").append(new_string);
called function
function getTotalAmount(unqid)
{
alert(unqid);
var q = document.getElementById("quantity").value;
//alert(q);
var p = document.getElementById("perunit").value;
// alert(p);
if(q!='' && p!='')
{
var total = p * q;
// alert(total);
document.getElementById("amount").value = total;
}
}
You can do something like this :
html code
Value 1<input type="text" id="t1"><br/>
Value 2<input type="text" id="t2"><br/>
Result<input type="text" id="t3">
js:
$('#t2').blur(function(){
var a = $('#t1').val();
var b = $('#t2').val();
var c = a*b;
$('#t3').val(c)
});
and check at https://jsfiddle.net/ejzn66n5/