How can I make my drop down selections change my total by they're values but not be calculated unless selected

Question

How can I make my drop down selections change my total by they're values but not be calculated unless selected?

Here is what I got. Any help will be much appreciated.

I would like the dropdown for 4PC to do no change 6PC would add 2.00 to the price and 12PC would add 4.00

I'm not sure what I'm doing wrong, can someone please point it out to me thanks.

Here is my code for the table

 function multiply() { a = Number(document.getElementById('QTY').value); b = Number(document.getElementById('PPRICE').value); c = Number(document.getElementById('4PC').value); d = Number(document.getElementById('4PCM').value); e = Number(document.getElementById('6PC').value); f = Number(document.getElementById('6PCM').value); g = Number(document.getElementById('12PC').value); h = Number(document.getElementById('12PCM').value); i = a * b + c * d + e * f + g * h; j = Number(document.getElementById('SALESTAX').value); k = i * j; l = Number(document.getElementById('TAXDIV').value); m = k / l; n = i + m; document.getElementById('SUBTOTAL').value = i; document.getElementById('TAX').value = m; document.getElementById('TOTAL').value = n; } 

 <table> <tr style="background-color:black; color:white" > <th>Menu Item</th> <th>Quantity</th> <th>Price</th> <th>Preferance</th> </tr> <tr> <td>Boneless Chicken Wings</td> <td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td> <td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td> </td> <td> <form action="/action_page.php"> <select id="BONELESS_COUNT"> <option value="0.00" name="4PC" id="4PC">4 Piece $5.99</option> <option value="2.00" name="6PC" id="6PC">6 Piece $7.99</option> <option value="4.00" name="12PC" id="12PC">12 Piece $9.99</option> </select> <select name="Preparation"> <option value="Baked">Baked</option> <option value="Fried">Fried</option> </select> <select name="Flavor"> <option>Original</option> <option>Buffalo</option> <option>Parmesian</option> <option>Lemon Pepper</option> <option>BBQ</option> </select> </form> </td> </tr> <tr> <td></td> <td><input type="text" name="4PCM" id="4PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="6PCM" id="6PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="12PCM" id="12PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td> </tr> <tr> <td></td> <td align="right"><strong>Subtotal $</strong></td> <td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td> <td></td> </tr> <tr> <td></td> <td align="right" style="display:none"><strong>Salestax</strong></td> <td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td> <td></td> </tr> <tr> <td></td> <td align="right"><strong>Tax $</strong></td> <td><input type="text" name="TAX" id="TAX" /></td> <td></td> </tr> <td></td> <td></td> <tr> <td></td> <td align="right"><strong>Total $</strong></td> <td><input type="text" name="TOTAL" id="TOTAL"></td> <td></td> </tr> </table> 

Answer 1

It is not entirely clear from your question and your code what you are asking for (it is generally advised to provide a Minimal, Complete, and Verifiable example to elicit good answers on stackoverflow).

It appears that you want to know how to make your program respond to changes in a dropdown, so I will try to answer that with a simpler example than your code.

First, changes to <select> dropdowns trigger the onchange event, so you want to attach an event listener that responds to this.

Second, getting the selected value from a <select> dropdown is somewhat more involved than getting the current value from an <input> element: You need to access the .selectedIndex attribute to get the index number of the currently selected option, then access the correct index from the .options attribute of the dropdown.

The code snippet below demonstrates a simpler example of this in action. If you make changes to the 'Quantity' input or make a choice in the dropdown, this triggers the update() function, which updates the total.

 function update() { var total = document.getElementById('TOTAL'), qty = document.getElementById('QTY'), choice = document.getElementById('ITEM'); total.value = (choice.options[choice.selectedIndex].value * qty.value) .toFixed(2); } 

 th{text-align: left;} 

 <table> <tr> <th>Choose item</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td> <select id="ITEM" onkeyup="update()" onchange="update()"> <option value="5.99" name="4PC" id="4PC">4 Piece $5.99</option> <option value="7.99" name="6PC" id="6PC">6 Piece $7.99</option> <option value="9.99" name="12PC" id="12PC">12 Piece $9.99</option> </select> </td> <td> <input type="text" id="QTY" onkeyup="update()" /> </td> <td> <input type="text"id="TOTAL"> </td> </tr> </table>