Calculate all values - Dev Articles

Dev Articles Community Forums Sponsor:

July 27th, 2006, 07:07 PM

zigote

Contributing User

Join Date: Aug 2002

Location: Atlanta GA

Posts: 73

Time spent in forums: 1 h 55 m 11 sec
Reputation Power: 7

Calculate all values

I need to add all form values that has the "onClick="Calculate(this)"" command.

INPUT type works, but SELECT doesn't.

I tried this and it didn't work.

Code:

ips=obj.parentNode.getElementsByTagName('INPUT', 'SELECT');

These forms are created dymainc from the server, so adding form names wouldn't be a great idea.

Thanks for any help.

Code:

<html>
<head>
<script language="javascript" type="text/javascript">
    function Calculate (obj)
    {
        ips=obj.parentNode.getElementsByTagName('INPUT', 'SELECT');

        sum=0;
        for (i=0;i<ips.length;i++)
        {
            if (ips[i].checked)
            {
                sum+=ips[i].value*1;
            }
        }
        document.getElementById('total').value=sum;
    }
</script>
</head>

<body>
<input name="RadioGroup1" type="radio" value="1" onClick="Calculate(this)"> 1 
<input name="RadioGroup1" type="radio" value="2" onClick="Calculate(this)"> 2 
<input name="RadioGroup1" type="radio" value="3" onClick="Calculate(this)"> 3 <br />
<input name="check1" type="checkbox" value="4" onClick="Calculate(this)"> 4
<br>
<br>
<input name="RadioGroup2" type="radio" value="5" onClick="Calculate(this)"> 5 
<input name="RadioGroup2" type="radio" value="6" onClick="Calculate(this)"> 6 
<input name="RadioGroup2" type="radio" value="7" onClick="Calculate(this)"> 7 
<input name="check2" type="checkbox" value="8" onClick="Calculate(this)"> 8 <br /> <br />

<select name="HowMany" size="1" onClick="Calculate(this)" />
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
</select> <br /><br />

Total: <input id="total" size="10">

</body>
</html>

July 27th, 2006, 08:21 PM

Kravvitz

Contributing User

Join Date: May 2005

Location: USA

Posts: 135

Time spent in forums: 23 h 45 m 13 sec
Reputation Power: 4

Code:

getElementsByTagName('INPUT', 'SELECT')

Why would you want to do that? The for() loop is written to work with radio buttons and checkboxes.

Make a second call to getElementsByTagName() and write a for() loop to handle the select elements.

I suggest you read these:
Behavioral Separation
Unobtrusive JavaScript
DOM Scripting - Sample chapter: Best Practices
Accessible DHTML

July 28th, 2006, 10:22 AM

zigote

Contributing User

Join Date: Aug 2002

Location: Atlanta GA

Posts: 73

Time spent in forums: 1 h 55 m 11 sec
Reputation Power: 7

Thanks Kravvitz
I got it all worked out now.

The reason I used this.

Code:

getElementsByTagName('INPUT', 'SELECT')

Is because I thought it would work...

This works, but is it acceptable code?

Code:

    function Calculate (obj)
    {
        ips=obj.parentNode.getElementsByTagName('INPUT');
        sel=obj.parentNode.getElementsByTagName('SELECT');  

        sum=0;
        for (i=0;i<ips.length;i++)
        {
            if (ips[i].checked)
            {
                sum+=ips[i].value*1;
            }
         }
         for(i=0; i < sel.length; i++)
         {
             sum+=sel[i].value*1;
         }
        document.getElementById('TotalQuote').value=sum;
    }

Thanks again

July 28th, 2006, 03:07 PM

Kravvitz

Contributing User

Join Date: May 2005

Location: USA

Posts: 135

Time spent in forums: 23 h 45 m 13 sec
Reputation Power: 4

That would work, but it could be improved.

I prefer using parseInt() or parseFloat() instead of multiplying the string by one to convert it to a number. I added the "var" keyword and added checking so a non-number won't be added to the sum by mistake. I added the "elm" variable so a DOM lookup doesn't need to be made more than once for each loop.

Code:

    function Calculate (obj)
    {
        var ips=obj.parentNode.getElementsByTagName('input');
        var sel=obj.parentNode.getElementsByTagName('select');    

        var sum=0,elm;
        for (var i=0;i<ips.length;i++)
        {
            elm = ips[i];
            if (elm.checked)
            {
                sum+=!isNaN(parseFloat(elm.value))?parseFloat( elm.value):0;
            }
        }
        for(i=0; i < sel.length; i++)
        {
            elm = sel[i];
            if (elm.selectedIndex >= 0)
            {
                sum+=!isNaN(parseFloat(elm.value))?parseFloat( elm.value):0;
            }
        }
        document.getElementById('TotalQuote').value=sum;
    }

Note: You can remove the space in "?parseFloat( elm.value)" if you want. I added it to keep the forum system from putting a space in where one shouldn't be.

Last edited by Kravvitz : July 28th, 2006 at 03:10 PM.

July 28th, 2006, 03:10 PM

zigote

Contributing User

Join Date: Aug 2002

Location: Atlanta GA

Posts: 73

Time spent in forums: 1 h 55 m 11 sec
Reputation Power: 7

Ohhhh ok,
this works out great, for what I need it for,

thanks again Kravvitz, for your time.

July 28th, 2006, 03:12 PM

Kravvitz

Contributing User

Join Date: May 2005

Location: USA

Posts: 135

Time spent in forums: 23 h 45 m 13 sec
Reputation Power: 4

You're welcome

If you use my code make sure, to use the version from after I edited my post.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: