Javascript表单值消失 [英] Javascript forms Value disappear
问题描述
< html>
< head>< / head>
< body>
< script>
函数calc_form（第一，第二）{
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 =textname =first>
< input type =textname =second>
< input type =submitonclick =calc_form（）>< br>
< input type =textid =result>
< / form>
< p id =result1>< / p>
< / body>
< / html>
我知道这是一个无用且非常差的代码，但我想知道为什么值在我点击提交按钮后，我在输入框中输入的内容消失。
同样，第三个输入框中的结果只出现一会儿，然后消失。为什么会发生这种情况？当单击html提交按钮时，表单值将被收集，并生成服务器请求。根据定义的请求类型（POST或GET），数据以URL或表格格式发送到服务器。请求后，页面刷新，因为客户端html代码再次呈现。
您可以在服务器端响应收到客户端结果后，构建读取值的逻辑。但是，我猜你需要在代码中防止每次单击按钮时将数据发送到服务器端，并仅在客户端进行计算。有两种方法可以做到这一点：
- 将按钮类型从submit更改为button。 >
-
在oncick事件中以及函数return false的结尾。它阻止了提交操作并向服务器发送提交请求。
$ b< input type =submitonclick =return calc_form（）>
然后：
函数calc_form（first，second）{
.. 。
return false;
...
}
First the code:
<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>
I know that this is a useless and very poor code but I want to know that why does the values that I enter in the input box disappear right after I click the "Submit" button.
Similarly, the result in the third input box appears only for a moment and then disappears. Why is this happening?
When one click on html submit button, the form values are collected and server request is generated. Depending on request type defined (POST or GET), the data are sent to the server in URL or form format. After request the page is refreshed because the client html code is rendered again.
You can build the logic reading the values after server side response received results to client. However, I guess you need in your code to to prevent sending data to the server side each time you click on the button and to make calculations on the client only. There're two ways you could do that:
- change the type of the button from "submit" to "button".
in the oncick event as well as at the end of the function "return false". It prevents from the submit action and sending submit request to server.
<input type="submit" onclick="return calc_form()">
then:
function calc_form(first, second) {
...
return false;
...
}
这篇关于Javascript表单值消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
