Javascript Price Calculator with Radio Button Options
Question
I'm trying to write a very simple price calculator for a client. The want the user to be able to enter their width and length in inches and then choose a product from a group of radio buttons to determine the price. the final calculation will be the width x length x price. I can get the script to calculate the width and length but I'm not sure how to set the var for the price from the radio button selected. Thanks in advance for anyone that can help with this. I would also like to limit the result to only 2 decimal places. Code is below.
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
//calculator
function cal() {
var x=document.form.length.value
var y=document.form.width.value
var a=x*y
var p=document.form.radio.value
var total=a*p
document.form.total.value=total;
}
</script>
</head>
<body>
<h3>Project cost calculator:</h3>
<form action="" name="form">
<p><input type="text" name="length" size="4" />
Enter the length of your banner in inches.<br />
<input type="text" name="width" size="4" />
Enter the width of your banner in inches.</p>
<p>
<input type="radio" name="radio" id="paper" value="0.0625">
paper</label>
<input type="radio" name="radio" id="vinyl" value="0.08333333">
<label for="product">vinyl</label>
</p>
<p><b>Click this button to calculate the approximate cost of your project:</b><br />
<input type="button" name="money" value="calculate" onclick="cal()" /></p>
<p> <input type="text" name="total" size="6" /></p>
</form>
</body>
</html>
1 answers
solution1
1 2013-12-31 03:11:00
Replace your code
var p=document.form.radio.value
with
var p=document.querySelector('input[name = "radio"]:checked').value
UPDATED: the above code doesn't work in IE, so, the following code should be used
if( document.getElementById("paper").checked == true ){
var p=document.getElementById("paper").value;
}
else{
var p=document.getElementById("vinyl").value;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.