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

Razzy · 06-25-2012, 09:05 PM

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

Old Pedant · 06-25-2012, 10:17 PM

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!

Razzy · 06-25-2012, 10:28 PM

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