Javascript 表格值消失

Question

首先是代码：

    <html>
    <head></head>
    <body>
     <script>
        function calc_form(first, second) {
            x = document.getElementById("calc");
            first = document.forms["calc"].elements["first"].value;
            second = document.forms["calc"].elements["second"].value;
            third =  first*second;
            document.forms["calc"].elements["result"].value = third;
            document.getElementById("result1").innerHTML = third;
        }
    </script>
<form name = "calc">
    <input type = "text" name="first">
    <input type="text" name="second">
    <input type="submit" onclick = "calc_form()"><br>
    <input type="text" id="result">
</form>
<p id="result1"></p>
 </body>
</html>

我知道这是一个无用且非常糟糕的代码，但我想知道为什么我在输入框中输入的值在我单击 "Submit" 按钮后立即消失。

同样，第三个输入框中的结果只出现了片刻，然后就消失了。为什么会这样？

Answer 1

单击 html 提交按钮时，将收集表单值并生成服务器请求。根据定义的请求类型（POST 或 GET），数据以 URL 或表单格式发送到服务器。请求后页面刷新，因为客户端 html 代码再次呈现。

您可以构建在服务器端响应收到客户端结果后读取值的逻辑。但是，我想您需要在代码中防止每次单击按钮时都向服务器端发送数据，并且只在客户端进行计算。有两种方法可以做到这一点：

将按钮的类型从 "submit" 更改为 "button"。
在 oncick 事件中以及在函数结束时 "return false"。它阻止提交操作和向服务器发送提交请求。

<输入类型="submit" onclick="return calc_form()">

然后：

function calc_form(first, second) {
        ...
        return false;
        ...
    }

Javascript 表格值消失

Javascript forms Value disappear

javascript

html

dom