Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2004
    Location
    UK
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding up values from drop down lists

    Hi,

    I know very little about Javascript but I was trying my luck in order to produce some code so that 5 drop down lists with values 1 - 5 could be selected and then be automatically added up with the total value displayed in an text input box below.

    I thought I'd done everything correctly but it seems that rather than the values being added together, it simply displayed 1 number next to the other. Anyway, I'm sure there's someone who can help with this and I assume it's possible to get the desired effect. The code I came to a halt with is included below.

    Any help is much appreciated.

    Thanks

    Code:
    function doEcho()
    {
    var txt = echo.var1.value+echo.var2.value+echo.var3.value+echo.var4.value+echo.var5.value;
    echo.display.value = txt;
    }
    
    </script>
    
    <form name="echo">
    <select name="var1" onChange="doEcho()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var2" onChange="doEcho()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var3" onChange="doEcho()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var4" onChange="doEcho()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var5" onChange="doEcho()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select><br>
    
    <input type="text" name="display" onBlur="doEcho()" value="0" class="textfield" size="2" disabled>
    </form>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    The + symbol has two functions, addition and string concatenation. All the values of form controls are always string even if represented by numbers. So the solution is to convert each of them to numbers by using Number() or parseInt() methods.
    [code]
    Code:
    <head>
    <script type="text/javascript">
    function doEcho(objForm)
    {
      var total=0;
      for (var i=1;i<=5;i++){
         objSelect = objForm.elements["var" + i];
         total += Number(objSelect.options[objSelect.selectedIndex].value);     
      }
      objForm.display.value = total;
    }
    </script>
    </head>
    <body>
    <form name="echo">
    <select name="var1" onChange="doEcho(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var2" onChange="doEcho(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var3" onChange="doEcho(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var4" onChange="doEcho(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select name="var5" onChange="doEcho(this.form)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select><br>
    
    <input type="text" name="display" onBlur="doEcho(this.form)" value="0" class="textfield" size="2" disabled>
    </form> 
    </body>

  • #3
    New Coder
    Join Date
    Aug 2004
    Location
    UK
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so very much glenngv, and thanks for the quick response - it's a fantastic help. I'm sure I'll get round to learning some javascript sooner or later!

    Thanks again


  •  

    Posting Permissions

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