Develop Reference

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="">

How to disable button if dynamic textbox are empty

I have disabled my submit button to avoid submission when textbox are not filled. I have multiple dynamic textbox where the function works correctly. But upon adding another row of textboxes, the submit button is already enabled. How can I still disable the textboxes when the user decides to add another row? I need the submit button to be enabled whenever all the textboxes are filled, after and before adding another row.
<html>
<head>
<script>
function addRow(){
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
if(document.getElementById("uname").value==="" || document.getElementById("age").value==="" || document.getElementById("purpose").value==="" || document.getElementById("wafernum").value==="" || document.getElementById("cell").value==="" || document.getElementById("qty").value==="" || document.getElementById("remarks").value==="") {
document.getElementById('submit_form').disabled = true;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor="yellow";
}
}
</script>
<style>
</style></head>
<body>
Name: <input type="text" id="uname" />
Age: <input type="text" id="age" />
<input type= "button" id= "add" value="Add" onclick= "Javascript:addRow();" >
<table id= "bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type = "submit" name = "submit" id= "submit_form" value = "Submit" onclick="SaveData()" disabled>
</body>
</html>

Alright i fixed your error , you had some issues where you were enbaling the button and disabling , its always better to itrate and check through the loop rather than going and checking if every element is empty , check the bellow answer and the fiddle . let me know if it works . The edited script part is below , replace it with yours it should work .
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
var bt = document.getElementById('submit_form');
var ele = document.getElementsByTagName('input');
for(var i=0;i<ele.length;i++) {
if (ele[i].type == 'text' && ele[i].value == '') {
bt.disabled = true; // Disable the button.
return false;
}
else {
bt.disabled = false; // Enable the button.
}
}
}
</script>

Modify your conditions a little bit. Now it is working as desired
<html>
<head>
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
for(var i=0;i<rowCount;i++) {
var uname = unameArray[i];
var age = ageArray[i];
var cell = cellArray[i];
var qty = qtyArray[i];
var wafernum = wafernumArray[i];
var purpose = purposeArray[i];
var remarks = remarksArray[i];
if (uname === "" || age === "" || cell === "" || qty === "" || wafernum === "" || purpose === "" || remarks === "") {
document.getElementById('submit_form').disabled = true;
document.getElementById('submit_form').style.backgroundColor = "initial";
break;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor = "yellow";
}
}
}
</script>
<style>
</style>
</head>
<body>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" />
<input type="button" id="add" value="Add" onclick="Javascript:addRow();">
<table id="bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type="submit" name="submit" id="submit_form" value="Submit" onclick="SaveData()" disabled>
</body>
</html>

dynamically add input field value jQuery

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>

Multiple Checkbox Clear or Reset option Jquery

i want to consult issue about javascript jquery
i want this value > 20 && < 40 clear or reset option in jquery suggestion please.
It looks function error in javascript and function no clear and reset option. but function show display block wrong position .
<script>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()">
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()">
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()">
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);">
<input type="text" id="number" value="">
</form>
<a id="showdatacheckbox"></a>

function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function (e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
if (val > 20 && val < 40) {
$("input[type='checkbox']:checked").click();
}
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()" />
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()" />
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()" />
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);" />
<input type="text" id="number" value="" />
</form>
<a id="showdatacheckbox"></a>

Javascript add multiple form fields dynamically

I am new in javascript and PHP. I am creating a form where I need an option that user clicks on add fields then some fields add.
I am using this script:
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
Entry 1
and it's working but I need this code in the inner HTML
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
So how can I put these fields ?
Complete Code
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<div class="form-style-5" style="margin-left: 360px;">
<form name="form1" method="post" action="outgoingstocksave.php">
<fieldset>
<legend><span class="number"> </span> Outgoing Stocks Entry</legend>
<label>Ref. No.</label>
<input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>">
<div id="dynamicInput">
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
<input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required>
</div>
<input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required>
</fieldset>
<input type="submit" value="Save" />
</form>
</div>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('catname', -1); // value in first dropdown
</script>

I did a test on something similar a couple years back. See if you can hack this up for your needs.
Script...
<script type = "text/javascript">
var cnt = 0;
function addFile() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + cnt + '" name="file' + '' + '" type="file" />' +
'<input id="Button' + cnt + '" type="button" ' + 'value="X" onclick="deleteFile(this)" />';
document.getElementById("uploadControls").appendChild(div);
cnt++;
buttonText();
}
function deleteFile(div) {
document.getElementById("uploadControls").removeChild(div.parentNode);
cnt--;
buttonText();
}
function buttonText() {
if (cnt > 0) {
document.myform.add_button.value = 'Add Another Attachment';
} else {
document.myform.add_button.value = 'Add Attachment';
}
}
</script>
HTML...
<form name="myform" action="<your thing>" method="post" enctype="multipart/form-data" style="display:inline;">
<input id="add_button" type="button" value="Add Attachment" onclick="addFile()" />
<br /><br />
<div id="uploadControls"></div>
<br/>
<input type="submit" value="Submit" name="action">
</form>