Get total sum of textbox in Javascript, php

Question

1.00/5 (1 vote)

See more:

here is my php code to display the values.

PHP

<input type="text" id="txtParticulars" name="txtParticulars" value="'.$Particular.'"><input type="text" id="txtQty'.$RSD_No.'" value ="'.$Quantity.'" readonly>
<input type="text" id="txtUP" name="txtUP'.$RSD_No.'" /><input type="text" id="txtTotal'.$RSD_No.'" readonly>
Total:<input type="text" id="txtGrandTotal" class="add" readonly />

and the javascript.

function calc(row)
{
    var in1=document.getElementById('txtQty'+row).value;
    var in2=document.getElementById('txtUP'+row).value;
    var in3=in1*in2;
	var total = document.getElementById('txtTotal'+row).value=in3.toFixed(2); 
}

I have textboxes that has a value, what I need is to get the grand total.

Posted 23-Sep-14 19:30pm

melvinn

Updated 8-Oct-18 2:06am

Add a Solution

3 solutions

Solution 1

javascript or jQuery? In jQuery use of each function would easily solve it.

JavaScript

function sumRows() {
    var totalSum = 0;
    $("tr").each(function(item, index) {
        totalSum += item.value; // yor row values come here, item.value is just a placeholder
    });
}

In javascript, you should select by tag and do for loop accumulating sum of each row. You might need further filtering if your design contains other rows...

Something like:

JavaScript

function sumRows() {
    var rows = document.getElementByTagName("tr");
    var totalSum = 0;
    for (i=0; i<rows.lenght-1;>    //do your summing here
        totalSum += 1; // yor row values come here
    }
}

Solution based on your html above - using jQuery. ^= reads as starts with so it selects particular series of input boxes regardless of the identification part.

JavaScript

function sumRows()
{
    var particulars = $("input[id^=txtParticulars]");
    var sumParticulars = 0;
    if (particulars != null) 
        particulars.each(function(index) {
            sumParticulars += this.val();
        });

    var quantities = $("input[id^=txtQty]");
    var sumQuantities = 0;
    if (quantities != null){
        quantities.each(function(index) {
            sumQuantities += this.val();
        });
}

Posted 23-Sep-14 20:14pm

Sinisa Hajnal

Updated 24-Sep-14 20:05pm

v4

Comments

melvinn 24-Sep-14 3:38am

i have 4 textbox per row, what i want to get is the total sum of all textbox in the last column.

Sinisa Hajnal 24-Sep-14 3:58am

You already have function that does per row calculation in2 * in3. The above is the setup...you need to replace my comments with the code you need to sum (in this case, get the textbox in the row on which the loop currently holds, add it to total sum (you'll need more sum variables if you have to sum four columns or an array to hold your sums)

This is purely client side solution - you could sum it in the PHP server side and just spit it out in HTML.

Denrich 24-Sep-14 19:55pm

hi Sinisa Hajnal, can you give us a sample code? thanks

Sinisa Hajnal 25-Sep-14 2:06am

See updated solution, last part. Accept the solution if this helps. Thank you. Just to be clear, the solution is for grand total across ALL rows. So, that would be summary at the bottom of the grid. I know you said you need per row sum, but since you already have the function that does it, I assume it is an error in communication.

Is it? Your original function sums Qty and UP into total (although I find the construct total = something = something else strange :) )

Solution 4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<title>	Adding new textbox values </title>
	<script type="text/javascript">
		function viewsource(){
			alert(document.body.innerHTML);
		}
	</script>
	<script type="text/javascript">
		function addRowToTable(){
			var tbl = document.getElementById('tblSample');
			var frm=document.form0;
			if (!frm.ary) frm.ary=[frm.t1_2];
			var lastRow = tbl.rows.length;
			var iteration = lastRow;
			var row = tbl.insertRow(lastRow);

			var cellLeft = row.insertCell(0);
			var textNode = document.createTextNode(iteration);
			cellLeft.appendChild(textNode);

			var cellRight1 = row.insertCell(1);
			var el1 = document.createElement('input');
			el1.type = 'text';
			el1.name = 't' + iteration + '_1';
			el1.id = 't' + iteration + '_1';
			el1.size = 40;
			cellRight1.appendChild(el1);

			var cellRight2 = row.insertCell(2);
			var el2 = document.createElement('input');
			frm.ary.push(el2);
			el2.type = 'text';
			el2.value = '';
			el2.name = 't' + iteration + '_2';
			el2.id = 't' + iteration + '_2';
			el2.size = 5;
			el2.onkeyup=Calc;
			el2.onblur=Calc;
			cellRight2.appendChild(el2);
		}
	</script>
	<script type="text/javascript">
		function Calc(){
			var frm=document.form0;
			if (!frm.ary) frm.ary=[frm.t1_2];
			var total=0;
			for (var zxc0=0;zxc0<frm.ary.length;zxc0++){
				if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value)) total+=frm.ary[zxc0].value*1;
			}
			frm.sum.value=total;
		}
	</script>
	</head>
	<body>
		<form action="none" method="get" name="form0" id="form0">
			<table border="0" id="tblSample" align="center">
				<tr>
					<th colspan="3"><br><br><br>Adding rows then adding up values entered<hr>
						<input type="button" value="Add new textbox" onclick="addRowToTable();"></th>
				</tr>
				<tr id="cloneid" >
					<td> 1 Name / Price </td>
					<td> <input type="text" name="t1_1" id="t1_1" size="40"> </td>
					<td> <input type="text" name="t1_2" id="t1_2" size="5" value="" onkeyup="Calc();" onblur="Calc();"></td>
				</tr>
			</table>
			<table border="0" align="center">
				<tr>
					<td colspan="3" align="center"><br><br>
						Sum: <input type="text" name="sum" id="sum"><br><br>
					</td>

				</tr>
			</table>
		</form>
	</body>
</html>

Posted 8-Oct-18 2:06am

Member 13592665

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

melvinn · Accepted Answer · 2014-09-24T23:05:00

JavaScript

function calc(row)
{
    var in1=document.getElementById('txtQty'+row).value;
    var in2=document.getElementById('txtUP'+row).value;
    var in3=in1*in2;
    var total = document.getElementById('txtTotal'+row).value=in3;
	sum();
}

JavaScript

function sum()
{
	var grandTotal = document.getElementById("txtGrandTotal");
   // grandTotal.value += parseInt(total);
   var arr = document.getElementsByName('txtTotal');
   var tot=0;
   for(var i=0;i<arr.length;i++)>
   {
		if(parseInt(arr[i].value))
			tot +=parseInt(arr[i].value);	
   }
   grandTotal.value = tot;
}

try this one. :)