www.webdeveloper.com
Results 1 to 9 of 9

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

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    5

    Sum of multiple dropdown value selections - guidance would be appreciated

    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

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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>

  3. #3
    Join Date
    Feb 2011
    Posts
    5
    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

  4. #4
    Join Date
    Feb 2011
    Posts
    5

    Hmmm...one other thing....

    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

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  6. #6
    Join Date
    Feb 2011
    Posts
    5
    Quote Originally Posted by tirna View Post
    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>

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    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>

  8. #8
    Join Date
    Feb 2011
    Posts
    5
    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!

  9. #9
    Join Date
    Jan 2013
    Posts
    1

    Appending listbox values prior to Submit

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles