how to add n number of input value with javascript

how to add n number of input value with javascript - javascript

Friends, I want the sum of the numbers I put in fields and these input value total are equal to my total value. it show a Nan Error When i add these input values please help
This is my body Content
<form action="" method="post">
<input type="text" name="cnum" placeholder="enter no. of input">
<input type="submit" name="submit" >
</form>
<?php
if(isset($_POST['cnum']))
{
$cnum=$_POST['cnum'];
$i=0;
?>
<form action="" method="post">
<input type="hidden" name="total" id="total" value="10">
<input type="hidden" name="cnum" id="cnum" value="<?php echo $cnum ;?>">
<?php
while($i<$cnum)
{
?>
<input type="number" id="aq<?php echo $i; ?>" onKeyup="add()" name="aq<?php echo $i; ?>"><br />
<?php
$i++;
}
?>
<input type="submit" name="aqsub">
</form>
<?php
}
?>
This is my java script function
var val=0;
var total=document.getElementById('total').value;
var cnum=document.getElementById('cnum').value;
var anum;
function add()
{
var n=0;
while(n<cnum)
{
anum = 0;
if(document.getElementById('aq'+n).value != "") {
anum=parseInt(document.getElementById('aq'+n).value);
}
val += anum;
n++;
}
alert(val);
}

Update JS part:
var total=document.getElementById('total').value;
total = parseInt(total);
var cnum=document.getElementById('cnum').value;
cnum= parseInt(cnum);
function add()
{
var anum;
var val=0;
var n=0;
while(n<cnum)
{
anum = 0;
var temp = document.getElementById('aq'+n).value;
if( temp != "") {
anum=parseInt(temp);
}
val = +val + anum;
n++;
}
alert(val);
}
var total=document.getElementById('total').value;
total = parseInt(total);
var cnum=document.getElementById('cnum').value;
cnum= parseInt(cnum);
function add()
{
var anum;
var val=0;
var n=0;
while(n<cnum)
{
anum = 0;
var temp = document.getElementById('aq'+n).value;
if( temp != "") {
anum=parseInt(temp);
}
val = +val + anum;
n++;
}
alert(val);
}
<form action="" method="post">
<input name="total" id="total" value="10" type="hidden">
<input name="cnum" id="cnum" value="10" type="hidden">
<input id="aq0" onkeyup="add();" name="aq0" value="" type="number"><br>
<input id="aq1" onkeyup="add();" name="aq1" value="" type="number"><br>
<input id="aq2" onkeyup="add();" name="aq2" value="" type="number"><br>
<input id="aq3" onkeyup="add();" name="aq3" value="" type="number"><br>
<input id="aq4" onkeyup="add();" name="aq4" value="" type="number"><br>
<input id="aq5" onkeyup="add();" name="aq5" value="" type="number"><br>
<input id="aq6" onkeyup="add();" name="aq6" value="" type="number"><br>
<input id="aq7" onkeyup="add();" name="aq7" value="" type="number"><br>
<input id="aq8" onkeyup="add();" name="aq8" value="" type="number"><br>
<input id="aq9" onkeyup="add();" name="aq9" value="" type="number"><br>

Add Following code in your javascript
cnum = parseInt(cnum);

Update code as:
var total= parseInt(document.getElementById('total').value);
As you are using total to comparing with anum. so must be error Nan for total

Well I don't understand your logic but you get NAN because your value of fields are blank.
try this code
var val=0;
var total=document.getElementById('total').value;
var cnum=document.getElementById('cnum').value;
var anum;
function add()
{
var n=0;
while(n<cnum)
{
anum = 0;
if(document.getElementById('aq'+n).value != "") {
anum=parseInt(document.getElementById('aq'+n).value);
}
val += anum;
n++;
}
if(total==anum)
{
alert('Its Work');
}
else
{
alert('Its not Work');
}
}

why dont you directly include the PHP var into a JS var?
var cnum=<?php echo $cnum ;?>;
Also may check against "", and then use a zero
parseInt(input.value)||0;

Related

how to auto sum multiple inputbox inner loop in javascript

I want to calculate my input box inner looping and this bellow is what if done please help me to solve this issue
<?php
$jumlah_form = 3;
for($i=1; $i<=$jumlah_form; $i++){
?>
<input type="text" id="txt1" onkeyup="sum1();" /></br>
<?php
}
?>
<input type="text" id="txt2" value= "0" /></br>
<script>
function sum1() {
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) + parseInt(txtFirstNumberValue) ;
if (!isNaN(result)) {
document.getElementById('txt2').value = result;
}
}
</script>
Three input boxes are created by looping, I want to calculate three input box, and parse the result into result box whenever user input number

I think you are asking how to write the JavaScript so that it will add up the total of all the input boxes, no matter how many are created by the PHP?
If so then a good way would be to give all the textboxes the same class. Then, the JavaScript can just select all boxes with that class, loop through them and get the total value.
Here's a worked example using 3 textboxes (as if the PHP had generated them this way):
var textboxes = document.querySelectorAll(".sum");
textboxes.forEach(function(box) {
box.addEventListener("keyup", sumAll);
});
function sumAll() {
var total = 0;
textboxes.forEach(function(box) {
var val;
if (box.value == "") val = 0;
else val = parseInt(box.value);
total += val;
});
document.getElementById("total").innerText = total;
}
<input type="number" id="txt1" class="sum" value="0" /><br/>
<input type="number" id="txt2" class="sum" value="0" /><br/>
<input type="number" id="txt3" class="sum" value="0" /><br/>
<br/><br/> Total: <span id="total"></span>

To generate html with php:
$count = 5;
for($i=1;$i <= $count;$i++) {
echo "<input type='number' id='"."txt".i."' /></br>"
}
To calculate sum from inputs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<form onsubmit="submitForm(this); return false;" >
<input type="number" id='text1'>
<input type="number" id='text2'>
<input type="number" id='text3'>
<input type="number" id='text4'>
<input type="number" id='text5'>
<button type="submit" >Calculate</button>
</form>
<div>
<p>Result:</p>
<p id='result'></p>
</div>
<script>
function submitForm(form) {
let toReturn = 0;
const inputs = form.getElementsByTagName("input");
for(let x = 0; x < inputs.length; x++ ) {
toReturn += parseInt(inputs[x].value ? inputs[x].value : 0);
}
document.getElementById('result').innerHTML = toReturn;
return false;
}
</script>
</body>
</html>

How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

i want to show the money that customer must pay and my inputs are like this :
<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">
when the input text is changing i want to show the total cost (quantity*cost) in a <p> tag Dynamicly how can it be with javascript?

You can try this:
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>
And javascript part:
function calculate() {
var cost = Number(document.getElementById("credit"));
var limit = Number(document.getElementById("limit"));
document.getElementById("result").innerHTML= cost*limit;
}
You must ensure you entered numbers in inputs.

All of the above will generate errors if both the boxes are blank . Try this code , its tested and running .
<script>
function calc()
{
var credit = document.getElementById("credit").value;
var limit = document.getElementById("limit").value;
if(credit == '' && limit != '')
{
document.getElementById("cost").innerHTML = parseInt(limit);
}
else if(limit == '' && credit != '')
{
document.getElementById("cost").innerHTML = parseInt(credit);
}
else if(limit!= '' && credit!= '')
{
document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
}
else
{
document.getElementById("cost").innerHTML = '';
}
}
</script>
</head>
<input type="number" value="0" min="0" class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">
<input type="number" value="0" min="0" class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">
<p id="cost"></p>

Hope this will be useful
// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})
// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})
function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}
jsfiddle

In case you consider using JQuery I've made this fiddle.
See if it works for you.
https://fiddle.jshell.net/9cpbdegt/
$(document).ready(function() {
$('#credit').keyup(function() {
recalc();
});
$('#limit').keyup(function() {
recalc();
});
function recalc() {
var credit = $("#credit").val();
var limit = $("#limit").val();
var result = credit * limit;
$("#result").text(result);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">
<p id="result">0</p>

Try this:
<script >
function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>
Also, change your HTML to this:
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">
Enter cost and quantity.
Note the change with the second input: id='txt' was changed to id='txt2'. This is because no 2 elements can have the same id.
Note: Untested.

jquery sum of multiple input fields if same class in one input

Hello I need to sum the values of same class input in one input with class name total.
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
Possible?
A working fiddle here
$(document).on("change", "qty1", function() {
var sum = 0;
$("input[class *= 'qty1']").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});

You pretty much had it, just needed to adjust your JQuery a little bit for the appropriate selectors
updated fiddle : http://jsfiddle.net/5gsBV/7/
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});

I suggest this solution:
html
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
<div id="result"></div>
js
$(".qty1").on("blur", function(){
var sum=0;
$(".qty1").each(function(){
if($(this).val() !== "")
sum += parseInt($(this).val(), 10);
});
$("#result").html(sum);
});
fiddle

I think your issue is here:
$("#destination").val(sum);
change it to:
$(".total").val(sum);
And instead of change event i suggest you to use keyup instead.
$(document).on("keyup"

$(document).on("keyup", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});

We can use following own function
(function( $ ){
$.fn.sum=function () {
var sum=0;
$(this).each(function(index, element){
sum += parseFloat($(element).val());
});
return sum;
};
})( jQuery );
//Call $('.abcd').sum();
http://www.gleegrid.com/code-snippet/javascript/jquery-sum-input-values-by-class/?filter=bygroup&group=JQuery

$('.qty1').each(function(){
sum += parseFloat(this.value);
});
console.log(sum);

This will work with pure js
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<p>Total Value :<span id="total">100%</span></p>
<p>Left Value :<span id="left">0.00%</span></p>
var percenInput = document.querySelectorAll('.percent-input');
for (let i = 0; i < percenInput.length; i++) {
percenInput[i].addEventListener('keyup', getPercentVal)
}
function getPercentVal() {
var total = 0;
var allPercentVal = document.querySelectorAll('.percent-input');
for (var i = 0; i < allPercentVal.length; i++) {
if (allPercentVal[i].value > 0) {
var ele = allPercentVal[i];
total += parseFloat(ele.value);
}
}
document.getElementById("total").innerHTML = total.toFixed(2) + '%';
document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';
}

You almost had it:
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
http://jsfiddle.net/DUKL6/1

The problem with all of the above answers is that they fail if you enter something other than a number. If you want something that is more friendly to users, you should do some validation, perhaps even give some feedback when a value other than a number is entered.
$('body').on('change', '.qty1', function() {
var total=0;
$(".qty1").each(function(){
quantity = parseInt($(this).val());
if (!isNaN(quantity)) {
total += quantity;
}
});
$('.total').val('Total: '+total);
});

<input type="text" class="price" placeholder="enter number one" />
<input type="text" class="price" placeholder="enter number two" />
<input type="text" class="price" placeholder="enter number three" />
<input type="text" class="price" placeholder="enter number four" />
<input type="text" id="total">
<script>
$(document).ready( function() {
$(document).on("keyup", ".price", function() {
var sum = 0;
$(".price").each(function(){
sum += +$(this).val();
});
$('#total').val(sum);
});
});
</script>

Check sum of inputs before submit

I need some help: I have the following form:
<form id="myForm" method="post" action="?action=agc">
<input type="hidden" name="start_date" value="<?= $_POST['start_date'] ?>" />
<input type="hidden" name="end_date" value="<?= $_POST['end_date'] ?>" />
<input type="hidden" name="c_name" value="<?= $_POST['c_name'] ?>" />
<input type="hidden" name="cluster" value='<?= $abn_cluster[0] ?>' />
<input type="hidden" name="abn" value="abn" />
Add percent <br /><br />
ABN percent<br />
<input type="text" name="poll[option][0][percent]" class="toAdd"> <input type="text" name="poll[option][0][name]" value="<?= $_POST['c_name'] ?>_0_"> <input type="checkbox" class="optionBox" value="True" name="poll[option][0][control_sample]" /><br />
<script>
var optionNumber = 1;
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
var newOption2 = document.createElement("input");
var newOption3 = document.createElement("input");
var newLabel = document.createElement("label");
var newContent = document.createTextNode(" ");
var newContent2 = document.createTextNode(" ");
newOption.name = "poll[option]["+optionNumber+"][percent]";
newOption.type = "text";
theForm.appendChild(newOption);
theForm.appendChild(newContent);
newOption2.name = "poll[option]["+optionNumber+"][name]";
newOption2.type = "text";
newOption2.value = "<?= $_POST['c_name'] ?>_"+optionNumber+"_"
theForm.appendChild(newOption2);
theForm.appendChild(newContent2);
newOption3.name = "poll[option]["+optionNumber+"][control_sample]";
newOption3.type = "checkbox";
newOption3.className = "optionBox";
newOption3.value = "True"
theForm.appendChild(newOption3);
theForm.appendChild(document.createElement("br"));
optionNumber++;
}
</script>
</p>
</div>
<div class="modal-footer" id="appendform">
<button type="submit" class="btn btn-primary">Continue</button>
</form>
Now because some of the inputs are generated on request, I have no idea how to check the sum of the(.toAdd). And I basically need to make sure that it's equal to 100 before submitting. What would be a solution to my problem? Thanks.

Try
<form id="myForm" method="post" action="iap_crm_campaign.php?action=abngamecampaign" onsubmit="return validate()">
Then
function validate(){
var sum = 0;
for(var i = 0; i < optionNumber; i++){
sum += parseFloat(document.getElementsByName('poll[option][' + i + '][percent]')[0].value);
}
if( sum == NaN || sum != 100){
alert('Sum of percentage must be 100');
return false;
}
}
Demo: Fiddle

var total = 0;
var toAdds = document.getElementsByClassName("toAdd");
for (var i = 0; i < toAdds.length; i++) {
total += parseInt(toAdds[i].value, 0);
}
if (total == 100) {
// OK
} else {
// not OK
}
Also, your code for adding new options needs to set the class:
newOption.className = "toAdd";

you can use jquery
$(".toAdd").length
or in simple js
var myInputs= document.getElementsByTagName('input');
var noOfInputs =myInputs.length;
well this will give you the count of i/p elements through loop, for summing the values...
var sum;
$(".toAdd").each(function() {
sum=sum+$(this).val();
});

how to disable form submit and check the form

I have the following code. I need to see how many checkboxes have been checked in my form and if there are 4 or less submit the form and if there are more display an error and don't submit.
function SetHiddenFieldValue()
{
var checks = document.getElementById('toppings').getElementsByTagName('input');
var toppings = new Array();
var randomNumber = Math.floor((Math.random() * 9000) + 100);
var totalChecked = 0;
var itemPrice = 5.99;
for (i = 0; i < checks.length; i++)
{
if (checks[i].checked)
{
toppings[i] = checks[i].value;
totalChecked += 1;
}
}
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
} else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
}
And my form is:
<form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
<input type="hidden" name="my-item-id" id="my-item-id" value="" />
<input type="hidden" name="my-item-name" id="my-item-name" value="" />
<input type="hidden" name="my-item-price" id="my-item-price" value="" />
<input type="hidden" name="my-item-qty" value="1" />
<input type="submit" name="my-add-button" value=" add " />
</form>
any help would be appreciated.

Your javascript looks correct. I think the only you should need to do is return false; on your if (totalChecked > 4) statement.
Edit: Here's the section of your javascript function to modify:
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
return false;
} else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
return true;
}

Your function needs to return false to cancel the submission or true to proceed. That's why your onsubmit form attribute is set to "return XXX()" rather than just "XXX()"

As mentioned, you should return false from your check function to cancel the submit, and true if the check is okay.
How about something like this?
<html>
<head>
<title>Pizza Order Form</title>
</head>
<body>
<script>
function SetHiddenFieldValue() {
var totalChecked = 0;
var itemPrice = 5.99;
var toppings = new Array();
var randomNumber = Math.floor((Math.random() * 9000) + 100);
var checks = document.getElementsByName('topping');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked) {
toppings[i] = checks[i].value;
totalChecked += 1;
}
}
if (totalChecked > 4) {
alert("You can only choose up to Max of 4 Toppings");
return false;
}
else {
itemPrice = itemPrice + (totalChecked * 0.99);
document.getElementById('my-item-name').value = toppings.join("\t");
document.getElementById('my-item-id').value = randomNumber;
document.getElementById('my-item-price').value = itemPrice;
return true;
}
}
</script>
<form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
<input type="hidden" name="my-item-id" id="my-item-id" value="" />
<input type="hidden" name="my-item-name" id="my-item-name" value="" />
<input type="hidden" name="my-item-price" id="my-item-price" value="" />
<input type="hidden" name="my-item-qty" value="1" />
<div id="toppings">
<input type="checkbox" name="topping" id="pepperoni" />Pepperoni
<input type="checkbox" name="topping" id="tomato" />Tomato
<input type="checkbox" name="topping" id="mushrooms" />Mushrooms
<input type="checkbox" name="topping" id="peppers" />Peppers
<input type="checkbox" name="topping" id="olives" />Olives
</div>
<input type="submit" name="my-add-button" value=" Add " />
</form>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

how to add n number of input value with javascript - javascript

Add Following code in your javascript cnum = parseInt(cnum);

Update code as: var total= parseInt(document.getElementById('total').value); As you are using total to comparing with anum. so must be error Nan for total

why dont you directly include the PHP var into a JS var? var cnum=<?php echo $cnum ;?>; Also may check against "", and then use a zero parseInt(input.value)||0;

Related

how to auto sum multiple inputbox inner loop in javascript

How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

jquery sum of multiple input fields if same class in one input

Check sum of inputs before submit

how to disable form submit and check the form

Categories

Resources