CODEWITHSUNDEEP
javascript
user3148147
user3148147

Reputation: 1

Javascript Price Calculator with Radio Button Options

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>

Upvotes: 0

Views: 2494

Answers (1)

Tun Zarni Kyaw
Tun Zarni Kyaw

Reputation: 2119

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;
}

Upvotes: 1

Related Questions