How to calculate discount for price and clear form when radio button is changed

Question

1) I am trying to calculate discount for price with this code but it does not work.

2) I want to clear form when the radio button is changed. Example the size is M and fill number in quantity input only If I change the size, the form will be clear or after amount show me If I change size, the form will be clear too.

 window.addEventListener("load", () => { document.getElementById('calculate').addEventListener('click', total) }); var total = function () { var s = Number(document.querySelector('input[name=size]:checked').value); var q = Number(document.getElementById('qty').value); var m = document.querySelector('input[name=member]:checked').value; var result; if(s && q && m) { if(q >= 1) { if(s == 'S') { result = s * q; } else if(s == 'M') { result = s * q; } else if(s == 'L') { result = s * q; } else { result = s * q; } result -= m === "YES"? result*5/100: 0; } else { result = " "; } } else { result = " "; } document.getElementById('amount').innerHTML = result.toFixed(2); } const clearForm = () => { document.getElementById('myForm').reset(); }

 <form id="myForm"> <div> <p>Size: <input type="radio" name="size" id="S" value="249">S <input type="radio" name="size" id="M" value="269">M <input type="radio" name="size" id="L" value="309">L <input type="radio" name="size" id="XL" value="319">XL </p> </div> <p>Quantity: <input type="text" name="qty" id="qty"> </p> <p>Member: <input type="radio" name="member" value="YES">YES <input type="radio" name="member" value="NO">NO </p> <p>Amount: $ <input type="text" name="amount" id="amount" readonly> </p> <button type="button" id="calculate">Calculate</button> <button type="button" id="clear" onclick="clearForm()">Reset</button> </form>

Answer 1

Your calculations are working as expected.

You have one problem in your Code:

document.getElementById('amount').innerHTML = result.toFixed(2); //Here with innerHTML

inputs cannot contain html. They can only contain a value. The property innerHTML is not ideal for input elements. What you are looking for is:

document.getElementById('amount').value = result.toFixed(2);

You must set the value of your amount, not innerHTML .

I have just edited your Snipped. Notice the changes I made on your code. A lot of stuff were unnecessary. Like your multiple if statements checking for 'S' , 'M' ... Because at the end they all lead to the same calculation expression.

 window.addEventListener("load", () => { // clear then textboxes on Size change document.querySelectorAll("input[name=size]").forEach(input=>{ input.addEventListener('change', ()=>{ clearTextBoxes(); }); }); }); var computeTotal = () => { var s = document.querySelector('input[name=size]:checked').value; var q = document.getElementById('qty').value; var m = document.querySelector('input[name=member]:checked').value; var result; //initialize to empty string if(s && q && m && q >= 1) { result = s * q; result -= m === "YES"? result*5/100: 0; } // Change innerHTML to value document.getElementById('amount').value = result == undefined? " ": result.toFixed(2); } var clearTextBoxes = () => { document.getElementById("qty").value = ""; document.getElementById("amount").value = ""; } const clearForm = () => { document.getElementById('myForm').reset(); }

 <form id="myForm"> <p>Member: <input type="radio" name="member" value="YES">YES <input type="radio" name="member" value="NO">NO </p> <div> <p>Size: <input type="radio" name="size" id="S" value="249">S <input type="radio" name="size" id="M" value="269">M <input type="radio" name="size" id="L" value="309">L <input type="radio" name="size" id="XL" value="319">XL </p> </div> <p>Quantity: <input type="number" name="qty" id="qty"> </p> <p>Amount: $ <input type="text" name="amount" id="amount" readonly> </p> <button type="button" id="calculate" onclick="computeTotal()">Calculate</button> <button type="button" id="clear" onclick="clearForm()">Reset</button> </form>

Answer 2

You need to clear the input fields when radio button changes. Find the working demo below

 window.addEventListener("load", () => { document.getElementById('calculate').addEventListener('click', total) }); var total = function() { var s = Number(document.querySelector('input[name=size]:checked').value); var q = Number(document.getElementById('qty').value); var m = document.querySelector('input[name=member]:checked').value; var result; if (s && q && m) { if (q >= 1) { if (s == 'S') { result = s * q; } else if (s == 'M') { result = s * q; } else if (s == 'L') { result = s * q; } else { result = s * q; } result -= m === "YES"? result * 5 / 100: 0; } else { result = " "; } } else { result = " "; } document.getElementById('amount').value = result.toFixed(2); } const clearForm = () => { document.getElementById('myForm').reset(); } // Add event listener to all radio items and add the clearfields logic var memberRadios = document.querySelectorAll('input[type=radio][name="member"]'); var sizeRadios = document.querySelectorAll('input[type=radio][name="size"]'); Array.prototype.forEach.call(memberRadios, function(radio) { radio.addEventListener('change', clearFields); }); Array.prototype.forEach.call(sizeRadios, function(radio) { radio.addEventListener('change', clearFields); }); function clearFields(event) { document.getElementById('qty').value = null; document.getElementById('amount').value = null; }

 <form id="myForm"> <p>Member: <input type="radio" name="member" value="YES">YES <input type="radio" name="member" value="NO">NO </p> <div> <p>Size: <input type="radio" name="size" id="S" value="249">S <input type="radio" name="size" id="M" value="269">M <input type="radio" name="size" id="L" value="309">L <input type="radio" name="size" id="XL" value="319">XL </p> </div> <p>Quantity: <input type="text" name="qty" id="qty"> </p> <p>Amount: $ <input type="text" name="amount" id="amount" readonly> </p> <button type="button" id="calculate">Calculate</button> <button type="button" id="clear" onclick="clearForm()">Reset</button> </form>