Javascript/HTML5 trouble calculating with radio buttons

Question

Been working on the Javascript for this HTML5 piece but I can't get the Fed Taxes or the Gross total to come up correctly. I'm think it may be something to do with my radio buttons. Any help would be wonderful. I'm new to this so please try to keep answers in layman's terms.

<!HTML>
<html>
<head>
<title> Payroll Calculator </title>
<script language="javascript">
  function Calc()
  {
    var hour, pay, status, kids, gross, tax, net;
    hour = parseFloat(document.payroll.Hours.value);
    pay = parseFloat(document.payroll.PayRate.value);
    gross = parseFloat (hour * pay);
    document.payroll.GrossPay.value = gross.toFixed(2);
    kids = parseFloat(document.payroll.Dependents.value);
    status = parseFloat(document.payroll.Marital.value);
    tax = parseFloat (gross * status) - kids;
    document.payroll.FedTaxes.value = tax.toFixed(2);
    net = parseFloat (gross - tax);
    document.payroll.NetPay.value = net.toFixed(2);
  }
</script>
</head>
<body>

<form name="payroll">
<table bgcolor="grey" cellpadding="0">
<tr><td colspan="2" align="center"><b>Payroll Calculator<b></td></tr>

<tr><td><label for="name"> Name: </label></td>
<td><input type="text" name="name"></td></tr>

<tr><td><label for="Hours"> Hours: </label></td>
<td><input type="text" name="Hours"> 99.9 </td></tr>

<tr><td><label for="PayRate"> Pay Rate: </label></td>
<td><input type="text" name="PayRate"> 99.99 </td></tr>

<tr><td colspan="2"> Marital Status: 
<input type="radio" value=".30" name="Marital" checked> Single
<input type="radio" value=".20" name="Marital"> Married </td></tr>

<tr><td> Dependents: </td><td>
<select name="Dependents">
    <option value="10"> 1 </option>
    <option value="20"> 2 </option>
    <option value="30"> 3 </option>
    <option value="40"> 4 </option>
    <option value="50"> 5 </option>
</select></td></tr>

<tr><td><label for="GrossPay"> Gross Pay: </label></td>
<td><input type="text" name="GrossPay" readonly></td></tr>

<tr><td><label for="FedTaxes"> Fed Taxes: </label></td>
<td><input type="text" name="FedTaxes" readonly></td></tr>

<tr><td><label for="NetPay"> Net Pay: </label></td>
<td><input type="text" name="NetPay" readonly></td></tr>

<tr><td colspan="2" align="center"><input type="button" value="Calculate" onclick="Calc()">
<input type="reset" value="Clear"></td></tr>
</form>

</table>
</body>
</html>

Answer 1

for get the value of selected radio you'll need to check which one is checked and get their value.

So you can calculate status var with the following:

status = parseFloat(document.payroll.Marital[0].checked ? document.payroll.Marital[0].value : document.payroll.Marital[1].value);

You can check here: http://jsbin.com/yekadohu/1/

Regards

Javascript/HTML5 trouble calculating with radio buttons

Question

1 answers

solution1
1 ACCPTED 2014-03-06 00:32:05

Javascript/HTML5 trouble calculating with radio buttons

Question

1 answers

solution1 1 ACCPTED 2014-03-06 00:32:05

solution1
1 ACCPTED 2014-03-06 00:32:05