Question

这里是我制作的代码并且没有工作，想看看如何将我的总和纳入结果字段，另外还要查看如何使用重置按钮清除字段中的所有文本。

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.result.submit()
        }

        function reset() {}
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form>
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
</body>

</html>

Answer 1

您为什么要提交表单？

您可以使用document.forms。访问表单。

试试这个：

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.forms.calculator.submit()
        }

        function reset() {
          document.forms.calculator.reset();
        }
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form name="calculator">
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
    <input type="button" onclick="reset()" value="reset">
</body>

</html>

Answer 2

只需为表单提供ID，然后在重置功能中，只需执行

即可

document.getElementById("myForm").reset();

更新

根据ROBG的评论，您不需要将函数绑定到按钮。你可以简单地添加一个

<input type="reset">

重置表单的所有字段，如果按钮不在表单中，则可以执行 <input form="formID" type="reset"> 与特定表格相关联。

Answer 3

你想要这个吗？ jsbin

<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            //document.result.submit()

            //if you want use submit, use this code. if only see the result, don't use this
            //Submit is receive data, so you can't see a result.
            //document.getElementById('formId').submit();

            //jquery submit
            //$("form")[0].submit();
        }

        function reset() {
          //no jquery
          document.getElementById('formId').reset();
          //jquery
          //$("form")[0].reset();
        }
    </script>
</head>
<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>
    <form id="formId">
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
    <input type="button" onclick="reset()" value="reset">
</body>

</html>

Answer 4

请注意，可以在不单击“提交”按钮的情况下提交表单，因此如果您希望在提交时发生某些事情，请将监听器附加到表单的提交处理程序。要重置表单，只需要一个重置按钮，无需代码。

表单控件必须具有成功的名称并使用表单提交其值，并且您可以使用来自侦听器的 this 传递对表单的引用，这样您就不需要使用 getElementById 。

实现上述功能可以显着减少所需的代码量。

在下面，提交侦听器返回false，因此阻止表单提交。如果您希望提交表单，只需从内联侦听器中删除return语句：

＆＃13;

function addition(form) {
  form.result.value = +form.num1.value + +form.num2.value;
}

＆＃13;

<form name="calculator" onsubmit="addition(this); return false;">
  Number 1:
  <input type="number" name="num1" value="0" autofocus>
  <br> Number 2:
  <input type="number" name="num2" value="0">
  <br> Result:
  <input type="text" name="result" value="0" readonly>
  <br>
  <input type="submit" value="Submit form">
  <input type="reset">
</form>

＆＃13;

您可能根本不想提交表单，在这种情况下，您可以将提交按钮设置为普通按钮并从那里调用该功能，但请记住停止提交表单。

使用带有sumbit按钮和重置按钮的JavaScript计算表单中的两个字段

4 个答案: