Dynamic textbox that calculates price based on change in quantity or item

Question

I'm new to javascript and am keen on learning.

I currently have a form that allows the user to select their food, enter their quantity and calculates the price.

My function is able to dynamically calculate the price whenever i change the food item selected. However, if i choose re-enter another quantity, the price will not update dynamically. I'm trying make it so that the price will dyanmically update whenever i change either the food dropdown or the quantity value. Appreciate any kind help.

Thank you.

Attached is my code.

  function getSelectValue() { var selectedValue1 = document.getElementById("dropdownList").value; if (selectedValue1 === 'Carbonara') { var currentPrice1 = 4.50 * parseFloat(amount_1.value); document.getElementById("price_1").value = "$" + currentPrice1; } else { var currentPrice1 = 3.50 * parseFloat(amount_1.value); document.getElementById("price_1").value = "$" + currentPrice1; } var selectedValue2 = document.getElementById("dropdownList2").value; if (selectedValue2 === 'Carbonara') { document.getElementById("price_2").value = "4.50"; var currentPrice2 = 4.50 * parseFloat(amount_2.value); document.getElementById("price_2").value = "$" + currentPrice1; } else { var currentPrice2 = 3.50 * parseFloat(amount_2.value); document.getElementById("price_2").value = "3.50"; } } 

  Select Food: <select id="dropdownList" name="dropdownList" onchange="getSelectValue();"> <option value="Prawn Aglio Olio">Prawn Aglio Olio</option> <option value="Carbonara">Carbonara</option> </select> <br> Select Quantity: <input type="text" id="amount_1"> <br> Price per unit: <input type="text" id="price_1" value="" disabled> <br> <br> <!-- Second Selection --> Select Food: <select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();"> <option value="">Prawn Aglio Olio</option> <option value="Carbonara">Carbonara</option> </select> <br> Select Quantity: <input type="text" id="amount_2"> <br> Price per unit: <input type="text" id="price_2" value="" disabled> <br> <input type ="button" value="Submit"> <a href="vendor.jsp"> <input type="button" value="Back"> </a> </form> 

Answer 1

Try to write the same event (getSelectedValue()) in the input of quantity

Try to initialize all the variables at the beginning so that everything is cleaner

Check that the input element.value "Quanity" exists, if so, fill in the field of 'price'

Test this

  function getSelectValue() { var dropdownList = document.getElementById("dropdownList"); var price_1 = document.getElementById("price_1") var amount_1 = document.getElementById("amount_1"); var dropdownList2 = document.getElementById("dropdownList2"); var price_2 = document.getElementById("price_2"); var amount_2 = document.getElementById("amount_2"); var currentPrice1 = "$" + 0; var currentPrice2 = "$" + 0; if (amount_1.value) { if (dropdownList.value === 'Carbonara') { currentPrice1 = 4.50 * parseFloat(amount_1.value); } else { currentPrice1 = 3.50 * parseFloat(amount_1.value); } price_1.value = "$" + currentPrice1; } if (amount_2.value) { if (dropdownList2.value === 'Carbonara') { currentPrice2 = 4.50 * parseFloat(amount_2.value); } else { currentPrice2 = 3.50 * parseFloat(amount_2.value); } price_2.value = "$" + currentPrice2; } } 

 Select Food: <select id="dropdownList" name="dropdownList" onchange="getSelectValue();"> <option value="Prawn Aglio Olio">Prawn Aglio Olio</option> <option value="Carbonara">Carbonara</option> </select> <br> Select Quantity: <input type="number" id="amount_1" onchange="getSelectValue();"> <br> Price per unit: <input type="text" id="price_1" value="" disabled> <br> <br> <!-- Second Selection --> Select Food: <select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();"> <option value="">Prawn Aglio Olio</option> <option value="Carbonara">Carbonara</option> </select> <br> Select Quantity: <input type="number" id="amount_2" onchange="getSelectValue();"> <br> Price per unit: <input type="text" id="price_2" value="" disabled> <br> <input type ="button" value="Submit"> <a href="vendor.jsp"> <input type="button" value="Back"> </a> </form>