[SOLVED] get the sum of many text box values

aliasneo86 · November 6, 2008

I have a editable grid form in the transactions page. in this there is a column named amount and the no of text box values under that is unknown how can I get a java script to to the sum of all the text boxs in that column?

the pic of the page is attached

thanks in advance

[attachment deleted by admin]

JasonLewis · November 6, 2008

I suggest giving the textboxes, when they are generated, a class name that you'll only use on them. For example, addition_textbox. Then you can apply the following to it:

<script language="javascript">
function calculate_total(className, div){
	var elements = document.getElementsByClassName(className);
	var total = 0;

	for(var i = 0; i < elements.length; ++i){
		total += parseInt(elements[i].value);
	}

	document.getElementById(div).innerHTML = "Total: " + total;
}
</script>
<input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br />
<input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br />
<input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br />
<input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br />
<input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br />
<input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br />
<input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br />
<input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br />
<input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br />

<div id="total_text"></div>

aliasneo86 · November 6, 2008

thanks a million

yet 1 issue

document.getElementsByClassName(className)

this is not working the calculation is not done after submit is pressed plz help

JasonLewis · November 6, 2008

Have you provided the input boxes with the appropriate class name then when you call the calculate function are you providing it with the same class name?

That code I posted works. So you may have implemented it into your code incorrectly.

aliasneo86 · November 6, 2008

can you see what wrong in this that i used ur own code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

function calculate_total(className, div){

var elements = document.getElementsByClassName(addition_textbox);

var total = 0;

for(var i = 0; i < elements.length; ++i){

total += parseInt(elements.value);

}

document.getElementById(div).innerHTML = "Total: " + total;

}

</script>

</head>

<body>

<form name="form1" method="get">

<input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br />

<input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br />

<input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br />

<input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br />

<input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br />

<input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br />

<input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br />

<input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br />

<input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br />

<div id="total_text"></div>

</form>

</html>

JasonLewis · November 6, 2008

var elements = document.getElementsByClassName(addition_textbox);

That's not what was in my code. It's supposed to be className, not addition_textbox.

aliasneo86 · November 6, 2008

is that the only change? because even so its not working

plz help

aliasneo86 · November 6, 2008

the error msg pic

code

====================

function calculate_total(className, div){

var elements = document.getElementsByClassName(className);

var total = 0;

for(var i = 0; i < elements.length; ++i){

total += parseInt(elements.value);

}

alert ("test");

document.getElementById(div).innerHTML = "Total: " + total;

}

text box

<input style="WIDTH: 88px; HEIGHT: 22px; TEXT-ALIGN: right" maxlength="20" size="12" value="{amount}" name="{amount_Name}" id="{amount_Name} class="addition_textbox"">

======================

[attachment deleted by admin]

JasonLewis · November 6, 2008

Okay we'll avoid doing it that way since it's not available for all browsers.

Try this instead:

<script language="javascript">
function calculate_total(className, div){
	var elements = document.getElementsByTagName("input");
	var total = 0;

	for(var i = 0; i < elements.length; ++i){
		if(elements[i].className == className){
			total += parseInt(elements[i].value);
		}
	}

	document.getElementById(div).innerHTML = "Total: " + total;
}
</script>
<input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br />
<input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br />
<input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br />
<input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br />
<input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br />
<input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br />
<input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br />
<input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br />
<input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br />

<div id="total_text"></div>

aliasneo86 · November 6, 2008

works on the normal html but when i implement it on my page its not working shall i attach my web html? can you assist me in this

thanx for all the help u gave me so far

aliasneo86 · November 6, 2008

the html is attached

[attachment deleted by admin]

Sign In

[SOLVED] get the sum of many text box values

Recommended Posts

aliasneo86

Link to comment

Share on other sites

JasonLewis

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

JasonLewis

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

JasonLewis

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

JasonLewis

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

aliasneo86

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information