Javascript HTML表单未提交，_Javascript_Html

Javascript HTML表单未提交，

javascript html

Javascript HTML表单未提交，,javascript,html,Javascript,Html,我目前有一个任务，就是获取一些变量，并将它们放入一个基于表单的计算器中，该计算器将信息传递给javascript，然后在计算后进行更新。我使用书中的一个示例将表单放在一起，但是当我单击按钮将信息发送到Javascript时，我只得到一个页面，上面写着“没有收到数据”。我已经看了好几个小时了，但我不知道到底发生了什么 HTML: 它看起来与教科书上的例子几乎没有什么不同，而且出于某种原因，他们的有效，而我的无效。这快把我逼疯了！请告诉我这是一个明显而愚蠢的问题。您的代码中有一个案例错误。假设您正在

我目前有一个任务，就是获取一些变量，并将它们放入一个基于表单的计算器中，该计算器将信息传递给javascript，然后在计算后进行更新。我使用书中的一个示例将表单放在一起，但是当我单击按钮将信息发送到Javascript时，我只得到一个页面，上面写着“没有收到数据”。我已经看了好几个小时了，但我不知道到底发生了什么

HTML:

它看起来与教科书上的例子几乎没有什么不同，而且出于某种原因，他们的有效，而我的无效。这快把我逼疯了！请告诉我这是一个明显而愚蠢的问题。

您的代码中有一个案例错误。假设您正在正确运行

init（）

，只需更改此行：

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

为此：

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

也就是说，将getElementbyId更改为getElementbyId

工作区：

您必须在某个地方调用

init（）

您在

document.getElementbyId（'total'）中出错。value=totalPay必须是document.getElementById（'total'）。value=totalPay带大写字母B


HTML

工资计算器
使用此表格计算您的薪水。
工作时间
工资率
扣留
全部的
扣留
最终总数
函数计算（）{
"严格使用",；
console.log（“开始计算”）；
var totalPay；
var扣缴；
var realPay；
var hours=document.getElementById（'hours'）。值；
var rate=document.getElementById（'rate'）。值；
var预扣税=document.getElementById（'预扣税'）.value；
总工资=小时*费率；
扣缴=总工资*扣缴；
realPay=总薪酬-代扣代缴；
document.getElementById（'total'）。value=totalPay；
document.getElementById（‘扣留’）.value=扣留；
document.getElementById（'realTotal'）。value=realPay；
console.log（“计算完成”）；
返回false；
}
函数init（）{
"严格使用",；
document.getElementById（'theForm'）。onsubmit=calculate；
console.log（“初始化”）；
}
console.log（“就绪”）；
init（）；

您确定问题与标题不完全相反，并且表单确实提交了吗？最好提供一个JSFIDLE！看起来您可能忘记了运行设置onsubmit
绑定的init
方法。在主体中需要类似于window.onload=init
或onload
的属性。尽管有更好的方法来处理onload事件。在这里阅读更多关于这些内容的信息，还有一个输入错误getElementbyid（'total'）
应该是getElementbyid（'total'）
（大写）。如果将逻辑封装在try/catch块中，则可以使用console.log报告控制台上的错误，并查看出现问题的地方。很抱歉，没有提供JSFIDLE，因为当时我似乎不知道如何从JSFIDLE中的HTML调用Javascript，我有点太沮丧了，没有想到把它放在HTML中测试一下。事实证明，这真的只是打字错误。疯狂的是，盯着某件东西看太久，会让你忽略像这样的小细节。谢谢大家的帮助！另外，罗杰斯先生，谢谢你提供的窗口加载提示。我把它放在那里，今天早上一切正常。事实上，这只是一个案例错误。该死的该死！我只是很高兴事情没有搞砸。非常感谢！非常感谢！我把答案给了在你之前发帖子的人，因为他们都是正确的，而且是一样的。不过，你们俩确实都是对的！
document.getElementbyId('total').value = totalPay;

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

<!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>