Sum of multiple dropdown value selections - guidance would be appreciated

**little big man** · 02-25-2011 05:06 PM

Hi folks,

Not a seasonsed JS user; I would like to have a number of dropdown forms on a page and have JS sum the total value up as the user makes their way down the page and selects values. I've googled the daylights out of this and come up with a proof of concept below - if I could get it to work right, I would apply to a larger page. It will live on a Sharepoint server so I can't just use PHP to handle the summing. Any help on my shortcomings would be greatly appreciated:

Code:

<SCRIPT LANGUAGE=javascript>
<!--
var sum = 0;
function OnChange(value)
{
	sum = sum + value; 
    return;
}
//-->
</SCRIPT><br>

<body>

<select name=select1 onchange='OnChange(select1)'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br>
<select name=select2 onchange='OnChange(select2)'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<script type="text/javascript">
document.write(sum);
</script>
</body>

Thanks,
Sean

**tirna** · 02-25-2011 05:46 PM

Code:

 
<html>
    <head>
        <script type="text/javascript" language="Javascript">
            var sum = 0;
            function OnChange(value){
                sum += new Number(value);
                document.getElementById('result').innerHTML = sum;
            }
        </script>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <select name=select1 onchange='OnChange(this.value)'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <br>
        <select name=select2 onchange='OnChange(this.value)'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <div id="result"></div>
    </body>
</html>

**little big man** · 02-25-2011 06:02 PM

Thank you! Now that I have a working example, I can google some of this syntax that I was missing and get a better footing.

Sean

**little big man** · 02-27-2011 12:06 AM

One follow-up question; I notice that if I change a dropdown's value more than once, the function just keeps adding it up and I end up with a score greater than the possible total for the whole page. Is there a reasonable way of handling an event such as this?

Thanks!
Sean

**tirna** · 02-27-2011 12:19 AM

ok, that's a different requirement from your first post.

The easiest way now would be to remove your onchange and add a button at the bottom. When you click the button, it gets the current selected value from each select list and sums them.

If you get stuck, post the code you have so far.

**little big man** · 02-28-2011 01:38 PM

Originally Posted by tirna

ok, that's a different requirement from your first post.

The easiest way now would be to remove your onchange and add a button at the bottom. When you click the button, it gets the current selected value from each select list and sums them.

If you get stuck, post the code you have so far.

Ok, I'm stuck....I'm not confident on what I'm passing into the function - the object model reference stuff I've read isn't sinking in and I'm not sure I'm addressing form elements correctly. The other thing that is inelegant is my attempt at adding - if I add a bunch more dropdowns, a loop with an array would be better but I can't work out the syntax. Thanks for any help - I appreciate it.

Code:

<html>
<body>
<script type="text/javascript">
sum = 0;
function Total(form) {
sum += (form1.select1.value+form1.select2.value);}
document.write(sum);
</script>

<form id="form1">
<select name=select1>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <br>
<select name=select2>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>  
</form>
<input name="" type="submit" onClick="Total(this.form);" value="Total" />
</body>
</html>

**tirna** · 02-28-2011 04:49 PM

With this demo you can add as many <select>s as you like without having to touch the javascript.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
    function calcTotal(oForm){
        var sum = 0;
        for(i=0; i < oSels.length; i++){
            sum += new Number(oSels[i].value);
        }
        document.getElementById('result').innerHTML = sum;
        return false;
    }
    window.onload=function(){
        oSels = document.getElementById('form1').getElementsByTagName('select');
        for(i=0; i < oSels.length; i++){
            oSels[i].onchange=function(){
                document.getElementById('result').innerHTML = '';
            }
        }
    }
    </script>
    </head>
    <body>
        <form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
            <select name=select1>
                <option selected="selected" value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <br />
            <select name=select2>
                <option selected="selected" value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <br />
            <input name="" type="submit" value="Total" />
            <span>Total: </span><span id="result"></span>
        </form>
    </body>
</html>

**little big man** · 02-28-2011 06:05 PM

Ha, I was harboring a glimmer of hope that I'd be close, but I see that isn't the case! So many questions......

Thank you very much!

**mylinkdaddy** · 01-08-2013 06:17 PM

Tirna or anyone else here,

I'm in over my head and appreciate any help. I know some PHP but I think a Javascript solution is what's needed (like the onClick function), and I know only a little JS.

This particular thread is close to what I want to do. I've tried to adapt Tirna's last Javascript but totally failed.

My form sends data to a third party site, which limits the number and types of fields I can use for form submission. So the processing has to be client-side. The listbox could have 50 to 100 options that regularly change. I want to concatenate the selected values for the external service. That way I only have one field on the service where I can search on "dog" and find all records with that value regardless of whether it was the only selection option or one of several.

What I need in particular -- I'm open to any solution:

1. A multidimensional array of listbox option values that represent the HTML text (must be defined) and option values (optional, if not provided the value is the same as the text) for each listbox.

2. A form with listbox where the user can select multiple options.

3. When the form is submitted:
A. The selected items are concatenated with a space, like "cat dog pig"
B. The concatenated string is sent as the value for the listbox field.

Thanks,
Marc

Thread: Sum of multiple dropdown value selections - guidance would be appreciated

Thread Tools

Display

Hybrid View

Sum of multiple dropdown value selections - guidance would be appreciated

Hmmm...one other thing....

Appending listbox values prior to Submit

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions