SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding the values of 2 select menus...

    Hi,

    I have 2 select menus, each containing several number amounts.

    Example:

    Code:
        <select name="total_weekday" id="total_weekday" onchange="this.form.total.value=calculateTotal(this);">
          <option value="0">0</option>
          <option value="1812.5">1</option>
    
          <option value="3625">2</option>
          <option value="5437.5">3</option>
          <option value="7250">4</option>
          <option value="9062.5">5</option>
          <option value="10875">6</option>
        </select>
    
    
        <select name="total_weekend" id="total_weekend" onchange="this.form.total.value=calculateTotal(this);">
          <option value="0">0</option>
          <option value="2265.625">1</option>
    
          <option value="4531.25">2</option>
          <option value="6796.875">3</option>
          <option value="9062.5">4</option>
          <option value="11328.125">5</option>
          <option value="13593.75">6</option>
        </select>
    What I want to do is when you select one option from each menu it adds the values together, and puts them into a text field.

    How can I do this?

    Thanks!

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,608
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here's a crude test to show you the idea. This is not bullet-proof - if you reselect an option in either select list then the total keeps incrementing.

    Code JavaScript:
    <html>
    <head>
    <script type="text/javascript">
    var total = 0;
     
    function init () {
    	var dest = document.getElementsByName('total')[0];
    	dest.value = total;
    }
     
    window.onload = init;
     
    function calculateTotal (el) {
    	var dest = document.getElementsByName('total')[0];
    	var val = el.value * 1;
    	total = total + val;
    	dest.value = total;
    }
    </script>
    </head>
    <body>
    <form>
        <select name="total_weekday" id="total_weekday" onchange="calculateTotal(this);">
          <option value="0">0</option>
          <option value="1812.5">1</option>
     
          <option value="3625">2</option>
          <option value="5437.5">3</option>
          <option value="7250">4</option>
          <option value="9062.5">5</option>
          <option value="10875">6</option>
        </select>
     
     
        <select name="total_weekend" id="total_weekend" onchange="calculateTotal(this);">
          <option value="0">0</option>
          <option value="2265.625">1</option>
     
          <option value="4531.25">2</option>
          <option value="6796.875">3</option>
          <option value="9062.5">4</option>
          <option value="11328.125">5</option>
          <option value="13593.75">6</option>
        </select>
        <input type="text" name="total" value="" />
    </form>
    </body>
    </html>
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guru... I'm not nearly good enough at JS to write something that subtracts an amount if you select a lower value, I did try to modify this script to work with select menus instead of just radio/checkboxes but had no luck...

    http://javascript.internet.com/forms...e-refresh.html


Bookmarks

Posting Permissions

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