首先是代码:
<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>
我知道这是一个无用且非常糟糕的代码，但我想知道为什么我在输入框中输入的值在我单击“提交”按钮后立即消失。
同样，第三个输入框中的结果只出现片刻，然后就消失了。为什么会发生这种情况？
最佳答案
当单击 html 提交按钮时，将收集表单值并生成服务器请求。根据定义的请求类型(POST 或 GET)，数据以 URL 或表单格式发送到服务器。请求后，页面会刷新，因为客户端 html 代码会再次呈现。
您可以构建在服务器端响应收到客户端结果后读取值的逻辑。但是，我想您需要在代码中防止每次单击按钮时都将数据发送到服务器端，并仅在客户端上进行计算。有两种方法可以做到这一点:
- 将按钮类型从“提交”更改为“按钮”。
在 oncick 事件中以及函数末尾“return false”。它阻止提交操作并向服务器发送提交请求。
<input type="submit"onclick="return calc_form()">
然后:
function calc_form(first, second) {
...
return false;
...
}
关于Javascript 表单值消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28250268/