Adding values from same name fields.

[vasilek]

Hello.

My webpage generates dynamic input fields that have the same name. It depends on how many records were found in the database.

I am trying to figure out how to add all the values from the fileds with the same name.

Example: the user could enter 1, 2 and 3 in the same name fields. I would like to get 6 as a sum.

<input name="myNumberField" type="text">
<input name="myNumberField" type="text">
<input name="myNumberField" type="text">


Thanks in advance for help.

 

[WartookMan]

You could use the "getElementsByName()" method, and use a FOR loop to add up the items such as:

<script type="text/javascript">
function AddUp(objName) {
	var items=document.getElementsByName(objName);
	var total=0;
	for(var x=0;x<items.length;x++) {
		total+=parseInt(items[x].value);
	}
	alert(total);
}
</script>

<input name="myNumberField" type="text">
<input name="myNumberField" type="text">
<input name="myNumberField" type="text">

<input type="submit" onclick="AddUp('myNumberField');return false;">

If you don't use "parseInt()" it will try to add up the strings (the values), which will create a concatenated string of the added values. That is:
If total=0, and the values were 1, 2 and 3 respectively, the "alert" would produce "0123"... so don't forget to convert the values into integers before adding.

If you want to add up real numbers then use:

items[x].value*1

instead.

Hope this helps.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (ILWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[vasilek]

Thanks, Pete. Is getElementsByName() safe in Nescape?

 

[WartookMan]

Ah... you're using the "other" browser. Alternatively, you could loop through the elements of the FORM using the following, and only add up the values of elements with the name you pass to the function:

<script type="text/javascript">
function AddUp(objName) {
    var total=0;
    for(var x=0;x<document.formname.length;x++) {
        var theField=document.formname.elements[x];
        if(theField.name == objName) {
            total+=parseInt(theField.value);
        }
    }
    alert(total);
}
</script>

<form name="formname">
<input name="myNumberField" type="text">
<input name="myNumberField" type="text">
<input name="myNumberField" type="text">

<input type="submit" onclick="AddUp('myNumberField');return false;">
</form>

Hope this helps.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (ILWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[vasilek]

Just like any other developer I build solutions to comply with any browser my customers may use. Regardless of my personal preferences.

 

[BillyRayPreachersSon]

>> Just like any other developer I build solutions to comply with any browser my customers may use.

Good on you! There are some developers that just don't care about such niceties as cross-browser or cross-platform support, choosing to run with whatever they have installed on their PC, blindy assuming it will work for everyone.

Dan

 

[WartookMan]

>> Just like any other developer I build solutions to comply with any browser my customers may use.

I fully agree! I spent a long (sigh) time ensuring that my site displayed (as much as possible) the same in Netscape 4.7x and IE 4+. I even tried using DIV's and a full CSS solution, but found that Netscape gave me more headaches than it was worth.

When it comes to JavaScript, however, I always try to find a cross-browser solution. I gave the "quick-and-dirty" solution, since it appears that most users in this forum only seem to care about IE. Netscape at least encourages correctly formed HTML by being pedantic about the DTD, IE seems to be too relaxed and doesn't encourage coders to code properly... but then I'm heading slightly off topic here

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (ILWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk