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

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

javascript forms

使用带有提交按钮和重置按钮的JavaScript计算表单中的两个字段,javascript,forms,Javascript,Forms,这里是我编写的代码，我不想看如何将我的总和输入结果字段，还想看如何使用重置按钮清除字段中的所有文本函数加法（）{ var x=+document.getElementById（'num1'）.value；变量y=+document.getElementById（'num2'）.value； document.getElementById（'result'）。值=x+y； document.result.submit（） } 函数重置（）{} 使用表格的计算器&；JavaScript

这里是我编写的代码，我不想看如何将我的总和输入结果字段，还想看如何使用重置按钮清除字段中的所有文本


函数加法（）{
var x=+document.getElementById（'num1'）.value；
变量y=+document.getElementById（'num2'）.value；
document.getElementById（'result'）。值=x+y；
document.result.submit（）
}
函数重置（）{}
使用表格的计算器&；JavaScript
第一：

第二点：

结果:

为什么要提交表单

您可以使用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>


函数加法（）{
var x=+document.getElementById（'num1'）.value；
变量y=+document.getElementById（'num2'）.value；
document.getElementById（'result'）。值=x+y；
document.forms.calculator.submit（）
}
函数重置（）{
document.forms.calculator.reset（）；
}
使用表格的计算器&；JavaScript
第一：

第二点：

结果:

只需为表单提供一个id，在重置函数中，只需执行以下操作

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

更新：

根据ROBG的评论，您不需要将函数绑定到按钮。您只需添加一个

<input type="reset">

重置表单的所有字段，如果按钮不在表单中，则可以执行以下操作

关联到特定表单。

是否要使用此表单？


函数加法（）{
var x=+document.getElementById（'num1'）.value；
变量y=+document.getElementById（'num2'）.value；
document.getElementById（'result'）。值=x+y；
//document.result.submit（）
//如果要使用提交，请使用此代码。如果只看到结果，请不要使用此代码
//提交是接收数据，因此您无法看到结果。
//document.getElementById（'formId'）.submit（）；
//jquery提交
//$（“表单”）[0]。提交（）；
}
函数重置（）{
//没有jquery
document.getElementById（'formId'）.reset（）；
//jquery
//$（“表单”）[0]。重置（）；
}
使用表格的计算器&；JavaScript
第一：

第二点：

结果:

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

表单控件必须有一个名称才能成功并与表单一起提交它们的值，您可以使用此名称从侦听器传递对表单的引用，因此不需要使用getElementById

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

在下面的示例中，提交侦听器返回false，以防止表单提交。如果要提交表单，只需从内嵌侦听器中删除return语句：

函数添加（表单）{
form.result.value=+form.num1.value++form.num2.value；
}


第一：

第二点：

结果:

若要提交表单，请使用

表单上的.submit（）
，若要重置表单，请使用.reset（）
您没有使用jQuery。。。为什么要贴上这样的标签？第一次贴对不起！将重置放入表单中，然后就不必使用click事件。此外，输入字段缺少name
属性，因此它们不会被提交。不需要任何代码来重置表单，重置按钮（输入类型重置）就可以做到这一点。这太棒了，但是如果我想将按钮移出表单呢？那样，“类型重置”按钮不起作用。您可以使用控件的“表单”属性关联表单之外的表单控件，以便将放置在任何位置并重置表单。它适用于您想要与表单关联的任何控件，但要注意可访问性约束（如果它们适用）。这太棒了，我喜欢它。感谢您使用它来增强原始控件，并使其具有更多计算
<input type="reset">

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