2

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>
Improve this question
1
  • </form> tag is before </table> tag. Needs to be other way round. Commented Mar 6, 2014 at 0:26

1 Answer 1

Reset to default
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!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Awesome, thanks a bunch!!! I get for the most part what you did here but why after checked does it have "? document.payroll.Marital[0].value" Just curious, the more info the more I'll learn and that couldn't hurt, and I'm assuming that the colon seperates the two hey? Thanks a bunch again!!!
Oh I think I may see what it means it questions whether single is actually checked before checking the other two, is that right to assume?
I try to explain with comments on jsbin. The "?" followed by ":" is an inline if else for set a value on a variable. " variable = (condition) ? (value if true) : (value if false) " jsbin.com/yekadohu/2/edit
Awesome I see now how I could written've it otherwise now as well. Though that will definitely come in handy down the line I'm sure. Thanks so much again for your help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.