Question

我需要做一个简单的作业，在表单的两个文本字段中输入两个整数，然后计算总和，然后将其打印在“文本字段（不可编辑）”中。我的程序似乎可以正常工作，但是它会打印正确的输出并立即重新加载页面。如果用户没有再次单击“提交”按钮

，我希望页面保留打印输出

这是我的代码HTML＆JS：

function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum = +x1 + +x2;
    document.getElementById("sum").innerHTML = +x1 + +x2;
}

<!DOCTYPE html>
<html>
<head>
    <title>Number in a form</title>
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="function.js">
    </script>
</head>
<body>
    <div id="mainDiv">
        <H3>Insert two positive numbers</H3>
         <form>
            First number:<br>
            <input id="n1" type="text" name="firstname"><br>
            Second number:<br>
            <input id="n2" type="text" name="lastname">
            <BR>
            <input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>

        </form> 
        The sum is:<br>
            <output id="sum" name="x" for="a b"></output>
    </div>

    <noscript>
        Sorry: Your browser does not support or has disabled javascript
    </noscript>
</body>
</html>

Answer 1

提交表单后，页面将重新加载。为避免这种情况，您应该将输入type属性从“提交”更改为“按钮”。

<input type="submit" value="Submit" onClick="updateExpr()"/>

到

<input type="button" value="Submit" onClick="updateExpr()"/>

Answer 2

您只需更改表单标签即可避免服务器调用

<form onSubmit="return false">

Answer 3

您实际上不需要表单来执行这样的操作。表单将值发送到后端，例如一台服务器。您只想操纵一些前端元素（例如容器），以在其中包含一些新文本。

<form>标签通常会将您发送到具有某些参数的URI，这是通过actions属性完成的。

<form action="addnames.php">

例如，

会在您的服务器上调用addnames.php脚本... 您不需要服务器tho..look下面：

  function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum =x1 +x2;
    document.getElementById("sum").innerHTML = sum;
}

<h2>HTML Forms</h2>

  First name:<br>
  <input id="n1" type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input id="n2" type="text" name="lastname" value="Mouse">
  <br><br>
  <button type="submit" onclick="updateExpr()">Submit</button>
  <div id="sum">
  
  </div>
  <script>

  </script>

Answer 4

我建议您将onSubmit方法添加到表单中，而不是将onclick添加到输入中。另外，您最好在函数中添加return：false并添加onsubmit="return updateExpr()"。

function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum = +x1 + +x2;
    document.getElementById("sum").innerHTML = +x1 + +x2;
    return false;
}

<!DOCTYPE html>
<html>
<head>
    <title>Number in a form</title>
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="function.js">
    </script>
</head>
<body>
    <div id="mainDiv">
        <H3>Insert two positive numbers</H3>
         <form onsubmit="return updateExpr()">
            First number:<br>
            <input id="n1" type="text" name="firstname"><br>
            Second number:<br>
            <input id="n2" type="text" name="lastname">
            <BR>
            <input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>

        </form> 
        The sum is:<br>
            <output id="sum" name="x" for="a b"></output>
    </div>

    <noscript>
        Sorry: Your browser does not support or has disabled javascript
    </noscript>
</body>

执行此操作的另一种方法是在通过onclick事件链接到该函数的表单之外添加按钮

Answer 5

只需添加preventDefault（），就像这样

function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;

}

输入和输出的表单在打印输出后立即重新加载页面

5 个答案: