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>

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

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

Answer 1

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

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

将按钮类型从“提交”更改为“按钮”。
在oncick事件中以及函数“return false”的结尾处。它阻止了提交操作并向服务器发送提交请求。

＆lt; input type =“submit”onclick =“return calc_form（）”＆gt;

然后：

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

Javascript表单值消失

1 个答案: