CODEWITHSUNDEEP
javascripthtml
Lifeinsteps
Lifeinsteps

Reputation: 3

HTML form not submitting,

I currently have an assignment to take some variables and put them in a form-based calculator that passes the information to javascript and then updates after the calculations. I put the form together using an example from the book, but when I click the buttom to send the information to the Javascript, I just get a page that says "No Data Received". I've looked at if for hours, but I have no idea what the heck is happening.

HTML:

<!doctype html>
<html lang="en">
<head>
    <title>Paycheck Calculator</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <form action="" method="post" id="theForm">
        <fieldset>
            <p>Use this form to calculate your paycheck.</p>                                                     
            <div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
            <div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
            <div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
            <div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
            <div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
            <div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
            <div><input type="submit" value="Calculate" id="submit"/></div>
        </fieldset>
    </form>
    <script src="js/paycheck.js"></script>
</body>
</html>

Javascript:

function calculate() {
    'use strict';
    var totalPay;
    var withheld;
    var realPay;
    var hours = document.getElementById('hours').value;
    var rate = document.getElementById('rate').value;
    var withholding = document.getElementById('withholding').value;

    totalPay = hours * rate;
    withheld = totalPay * withholding;
    realPay = totalPay - withheld;

    document.getElementbyId('total').value = totalPay;
    document.getElementById('withheld').value = withheld;
    document.getElementById('realTotal').value = realPay;

    return false;
}

function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = calculate;
}

It barely looks any different from the textbook example, and for some reason theirs works and mine doesn't. It's driving me crazy! Please tell me it's something obvious and stupid.

Upvotes: 0

Views: 106

Answers (2)

marco
marco

Reputation: 252

  1. you must calls the init() somewhere,
  2. you have a mistake in document.getElementbyId('total').value = totalPay; it must be document.getElementById('total').value = totalPay; with a capital B.

HTML

<!doctype html>
<html lang="en">
<head>
    <title>Paycheck Calculator</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="" method="post" id="theForm" >
        <fieldset>
            <p>Use this form to calculate your paycheck.</p>                                                     
            <div><label for="hours">Hours Worked</label><input type="text" name="hours" id="hours" value="0.00"></div>
            <div><label for="rate">Pay Rate</label><input type="text" name="rate" id="rate" value="0.00"></div>
            <div><label for="withholding">Withholding</label><input type="text" name="withholding" id="withholding" value="0.20"></div>
            <div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div>
            <div><label for="withheld">Withheld</label><input type="text" name="withhheld" id="withheld" value="0"></div>
            <div><label for="realTotal">Final Total</label><input type="text" name="realTotal" id="realTotal" value="0"></div>
            <div><input type="submit" value="Calculate" id="submit"/></div>
        </fieldset>
    </form>
    <script type="text/javascript">

      function calculate () {
        'use strict';
        console.log ("starting calculate");
        var totalPay;
        var withheld;
        var realPay;
        var hours = document.getElementById('hours').value;
        var rate = document.getElementById('rate').value;
        var withholding = document.getElementById('withholding').value;

        totalPay = hours * rate;
        withheld = totalPay * withholding;
        realPay = totalPay - withheld;

        document.getElementById('total').value = totalPay;
        document.getElementById('withheld').value = withheld;
        document.getElementById('realTotal').value = realPay;


        console.log ("calculate finished");
        return false;
      }

      function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = calculate;

        console.log ("inited");
      }

      console.log ("ready");
      init();
    </script>
</body>
</html>

Upvotes: 1

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

There's a case error in your code. Assuming you're running init() properly, you just have to change this line:

document.getElementbyId('total').value = totalPay;

To this:

document.getElementById('total').value = totalPay;

That is, change getElementbyId to getElementById

Working JSFiddle: http://jsfiddle.net/5L4478br/

Upvotes: 1

Related Questions