gpt4 book ai didi

Javascript 表单值消失

转载 作者:行者123 更新时间:2023-12-02 16:31:34 25 4
gpt4 key购买 nike

首先是代码:

    <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 代码会再次呈现。

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

  1. 将按钮类型从“提交”更改为“按钮”。
  2. 在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com