I need assistance with updating the quantity value when a radio button is selected. The default value of the quantity should be 1, but when I try to increase it by clicking on the addToOrderBtn, it resets back to 1.
After selecting a radio button, it should update a textfield that displays the quantity. Subsequently, I have a button to add items to the order. However, each time I attempt to modify the quantity in the textfield, it reverts back to the default value of 1.
In addition, the textfield tracking Total items (totalItems) should accumulate the input from addNumberOfItems.
I've tried updating the value of addNumberOfItems upon button click, yet it remains at the default value.
Please provide JavaScript-based solutions only.
Thank you!
Code pen: http://codepen.io/anon/pen/LpJqgj
var addNumberOfItems = document.getElementById("numberOfItems");
var addToOrderBtn = document.getElementById("addToOrder");
var totalItems = document.getElementById("items");
var totalPrice = document.getElementById("total");
if (selected == "Classic" && foodOptionChecked1 == true) {
addNumberOfItems.value = 1;
};
addToOrderBtn.onclick = function() {
document.getElementById('numberOfItems').value = addNumberOfItems.value;
totalItems.value = addNumberOfItems.value;
totalPrice.value = foodClassic[0].smallPrice;
addNumberOfItems.value = "";
};
HTML
<fieldset class="form1 hide" id="choices">
<legend> your Choices </legend>
<p style="margin-left:25%">Which one would you like?</p>
<form style="float: right" id="selectSize">
<input type="radio" id="food1" name="size" value=""><label id="foodLabel1">food1</label>
<br>
<input type="radio" id="food2" name="size" value=""><label id="foodLabel2">food2</label>
<br>
<input type="radio" id="food3" name="size" value=""><label id="foodLabel3">food3</label>
<br>
<input type="radio" id="food4" name="size" value=""><label id="foodLabel4">food4</label>
<input type="text" id="numberOfItems" name="" value="">
<button type="button" id="addToOrder">Add to order</button>
<button type="button">Remove last item</button>
</form>
<p style="margin-top: 15%; margin-left:25%"> Extras! </p>
<p style="margin-top: 11%; margin-left:25%"> How many? </p>
</fieldset>
<fieldset class="form1 hide" id="orderStatus">
<legend> Order Status </legend>
<form>
Items<input type="text" name="" id="items">
Total<input type="text" name="" id="total">
<button type="button">Order Now</button>
<button type="button">Cancel</button>
</form>
</fieldset>