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
    Jun 2012
    Posts
    41
    Thanks
    14
    Thanked 1 Time in 1 Post

    Calculating values from multiple dropdown menus, total value outputs on textbox

    hello people,

    i am creating a website for a meatshop and i am stuck on the order form page which requires a fair bit of javascript which i am quite new to, on the order form i have 4 dropdown menus, with all 4 having similar values:

    Code:
    <script type="text/javascript">
    function addDrops() {
    var sausageOne = document.getElementById( 'sausage1');
    var sausageTwo = document.getElementById( 'sausage2');
    document.getElementById( 'output').value = parseFloat(sausage1.options[ sausage1.options.selectedIndex ].value
    ) + parseFloat(sausage2.options[ sausage2.options.selectedIndex ].value
    );
    )
    </script>
    
    
    
    <body>
    
    
    <SELECT name="sausage1" id="sausage1" onchange="addDrops()" >
    <OPTION VALUE="" >
    <OPTION value="5.99">KQF bolly Chicken Sausages      
    <OPTION value="4.00">KQF bolly Lamb Sausages          
    <OPTION value="3.99">KQF Jumbo Lamb Sausages          
    </SELECT>
    		  
    <SELECT name="sausage2" id="sausage2" onchange="addDrops()">
    <OPTION VALUE="" >
    <OPTION value="5.99">KQF bolly Chicken Sausages      
    <OPTION value="4.00">KQF bolly Lamb Sausages          
    <OPTION value="5.99">KQF Jumbo Lamb Sausages          
    </SELECT>
    		  
    <SELECT name="sausage2" id="sausage3" onchange="addDrops()">
    <OPTION VALUE="" >
    <OPTION value="5.99">KQF bolly Chicken Sausages      
    <OPTION value="4.00">KQF bolly Lamb Sausages          
    <OPTION value="5.99">KQF Jumbo Lamb Sausages          
    </SELECT>
    		  
    <SELECT name="sausage2" id="sausage4" onchange="addDrops()">
    <OPTION VALUE="" >
    <OPTION value="5.99">KQF bolly Chicken Sausages      
    <OPTION value="4.00">KQF bolly Lamb Sausages          
    <OPTION value="5.99">KQF Jumbo Lamb Sausages          
    </SELECT>
    
    <input type="text" id='output'/>
    
    
    </body>
    when i select an option from the first dropdown menu the output should automatically appear on the textbox, and if i select an option from another dropdown menu then the value of the other dropdown menu should add to the value of the first dropdown menu etc. ive been trying to use the javascript above but it does not work

    would really appreciate it if someone could help

    thank you

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    The form makes no sense.

    Why would you need 4 <select>s when you only have 3 items in each one? At most, you would need 3 <select>s.

    On top of that, what do you do if somebody wants to order SEVEN (7) Chicken Sausages??? You need QUANTITY <select>s or <input>s in addition to the meat selections.

    Or is this homework for some class? It feels like that to me, because homework doesn't have to be realistic or work in the real world.

    ********

    By the way, you do *NOT* have to do
    Code:
        sausage1.options[ sausage1.options.selectedIndex ].value
    You only had to do that back in the days of Netscape version 4 (1999 or so). All modern browser allow you do just do
    Code:
        sausage1.value
    to get the same thing.

    Anyway, you have several mistakes in your JavaScript code.
    Code:
    function addDrops() {
        var sausageOne = document.getElementById( 'sausage1');
        var sausageTwo = document.getElementById( 'sausage2');
        document.getElementById( 'output').value = 
                parseFloat(sausage1.options[ sausage1.options.selectedIndex ].value) 
            + parseFloat(sausage2.options[ sausage2.options.selectedIndex ].value
        );
    ) // you are using right paren instead of right brace!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Razzy (06-25-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    41
    Thanks
    14
    Thanked 1 Time in 1 Post
    sorry there is about 8 values within the dropdown menus, i only added three so far, i wanted to make sure it worked first before completing the dropdown menu, sorry my bad
    thanx for picking out the mistakes, i am new to javascript


  •  

    Posting Permissions

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