HTML form not submitting,

Question

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.

You're sure the issue isn't the exact opposite of the title, and that the form actually submits ? — adeneo, Sep 10 '14 at 23:12
It looks like you may have forgotten to run the `init` method which sets up the `onsubmit` binding. You need something like `window.onload = init` or an `onload` attribute in the body. Though there are much better ways to handle the onload event thing. Read more about that stuff here http://stackoverflow.com/questions/191157/window-onload-vs-body-onload — mr rogers, Sep 10 '14 at 23:26
Also you have a typo `getElementbyid('total')` should be `getElementById('total')` (capitalization). If you wrap your logic in a try/catch block, you could use `console.log` to report errors on the console and see where things are falling over. — mr rogers, Sep 10 '14 at 23:33
Sorry about not providing a JSFIDDLE, because I couldn't seem to figure out how to call the Javascript from the HTML in JSFIDDLE at the time, and I was a bit too frustrated to come up with the obvious idea of just putting it in the HTML to test it. It turns out that it was really just the typo. Crazy how looking at something for too long will tend to cause you to glance over little details like that. Thanks for the help, everyone! Also, thanks for the window.onload tip, mr rogers. I put that in there and got everything working this morning. — Lifeinsteps, Sep 11 '14 at 09:05

score 1 · Accepted Answer · answered Sep 10 '14 at 23:56

1

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/

answered Sep 10 '14 at 23:56

AlliterativeAlice

11,841
9
52
69

It was, in fact, just the case error. Gosh stinking dang it! I'm just glad it wasn't a huge mess-up. Thanks so much! – Lifeinsteps Sep 11 '14 at 09:02

score 1 · Answer 2 · answered Sep 11 '14 at 00:08

you must calls the init() somewhere,
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>

Thanks so much! I gave the answer to the person who posted just a little bit before you since they're both correct and the same. You were both certainly right, though! — Lifeinsteps, Sep 11 '14 at 09:08

HTML form not submitting,

2 Answers2