Price Calculator Using Forms

Question

So here's the thing, I want to make a price calculator by letting the user fill up the form but it won't work. Also, I wanted to show the result on the input field. Thank you in advance.

 <!doctype HTML> <html lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title> <head> </head> <body> <form role="form" id="price" name="price"> <select class="" id="itemselect" onchange="calculate()"> <option id="itemprice" value="1.500">Adult's T-Shirt</option> <option id="itemprice" value="1.250">Kid's T-Shirt</option> <option id="itemprice" value="3.000">Dubai Polo</option> <option id="itemprice" value="6.000">Aerocool Polo</option> <option id="itemprice" value="4.000">Aerocool Crewneck</option> <option id="itemprice" value="5.000">Hoodies</option> </select> <p><input type="text" id="qty" onchange="calculate()" value=""></p> <p><input type="text" id="result" value="" disabled></p> </form> <script type="text/javascript"> function calculate(price){ var item = document.getElementByID("itemselect").value; var qty = document.getElementByID("qty"); item = parseInt(item); qty = parseInt(qty); var result = item*qty; document.getElementByID("result").value=result; } </script> </body> </html>

Answer 1

mistakes

Please change getElementByID by getElementById.
parseInt only parse value in integer so you multiplication give you only integer value so you have to parse in float. it's give you perfect output.

 <!doctype HTML> <html lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title> <head> </head> <body> <form role="form" id="price" name="price"> <select class="" id="itemselect" onchange="calculate()"> <option id="itemprice" value="1.500">Adult's T-Shirt</option> <option id="itemprice" value="1.250">Kid's T-Shirt</option> <option id="itemprice" value="3.000">Dubai Polo</option> <option id="itemprice" value="6.000">Aerocool Polo</option> <option id="itemprice" value="4.000">Aerocool Crewneck</option> <option id="itemprice" value="5.000">Hoodies</option> </select> <p><input type="text" id="qty" onchange="calculate()" value=""></p> <p><input type="text" id="result" value="" disabled></p> </form> <script type="text/javascript"> function calculate(price){ var item = document.getElementById("itemselect").value || 0; var qty = document.getElementById("qty").value || 0; item = parseFloat(item).toFixed(2); qty = parseFloat(qty).toFixed(2); var result = parseFloat(item*qty).toFixed(2); document.getElementById("result").value=result; } </script> </body> </html>

Price Calculator Using Forms

Question

1 answers

solution1
0 ACCPTED 2016-03-10 12:36:47

Price Calculator Using Forms

Question

1 answers

solution1 0 ACCPTED 2016-03-10 12:36:47

solution1
0 ACCPTED 2016-03-10 12:36:47