What I want my program to do:
I'm trying to make an online order form in html/java script. Within my select element, there are 3 options, each with a different price. I am trying to let the user select one of the options, choose the quantity they want, then display the total price.
Problem
The total price wont display.
What I've tried
I have create in internal js script, and create a function getChoice. Using if statements, I am checking to see which option the user selected and depending on which one is selected, I am multiplying the value's price by the quantity of the item they want, and trying to return this value to "total".
<script>
var choice = document.getElementById("burgerSize").value;
var amount = document.getElementById("quantity").value;
function(getTotalAmount){
if(choice === "4"){
document.getElementById("total").value=
amount*4;
}
if(choice === "6"){
document.getElementById("total").value=
amount*6;
}
if(choice === "10"){
document.getElementById("total").value=
amount*10;
}
}
</script>
My HTML code:
Please select size:
<select id="burgerSize" onchange="getTotalAmount()">
<option disabled="disabled" selected = "selected" Select option</option>
<option value="4">Large </option>
<option value="6">Extra-Large </option>
<option value="10">Supersize </option>
</select>
<label for="quantity"> Quantity: </label>
<input type="number" id="quantity" name="quantity" min=1><br>
<label> Total cost: </label>
<input type="text" id ="total"/><br>
</form><br><br>
<script>
Any pointers in the right direction would be really appreciated! Thanks in advance
You can easily make this working by doing something like calling the function when the user give values to the input fields.
function totalCal(){
const choice = document.getElementById("burgerSize").value;
const amount = document.getElementById("quantity").value;
document.getElementById("total").value = amount * choice;
}
document.getElementById("burgerSize").oninput = ( function(event) {
totalCal();
});
document.getElementById("quantity").oninput = ( function(event) {
totalCal();
});<form>
<label for="burgerSize">Please select size:</label>
<select id="burgerSize">
<option disabled="disabled" selected="selected">Select option</option>
<option value="4">Large </option>
<option value="6">Extra-Large </option>
<option value="10">Supersize </option>
</select>
<label for="quantity"> Quantity: </label>
<input type="number" id="quantity" name="quantity" min=1><br>
<label> Total cost: </label>
<input type="text" id="total" /><br>
</form>It will be better if you add greater than sign (">") at the end of the first option tag and also to get the total's value, you can multiply amount and choice according to this program.
Thanks and best regards!