提交表单后，请防止重新加载页面。 （没有ajax） [英] Prevent reloading page after submiting form. ( no ajax )
问题描述
我是JavaScript和jsp的新手。
我需要提交一个表单，它从输入字段计算一些值，并在提交后隐藏包含输入字段的 div 。提交另一个 div 后应该变为可见，并显示结果和一个新的提交按钮，可以再次重新载入jsp页面，以便我可以计算其他值。
一切正常，但仍然存在一个问题。提交表单并计算完成后，会显示新的 div 结果，但立即重新加载页面，以便我无法查看结果或按下用于重新加载页面的新按钮。
现在我正在寻找一种解决方案，除了使用ajax和cookie来显示结果而不重新加载jsp，直到我按下按钮重新加载。 b
$ b
这是我的js代码：
< script type =text / javascript >
counter = 3;
var myHash = {};
函数addInput（e）{
//检查当前输入字段是否已经创建了新的输入字段。
if（！myHash.hasOwnProperty（e.name））{
var element = document.createElement（input）;
element.setAttribute（name，number+ counter）;
element.setAttribute（onkeyup，addInput（this））;
element.setAttribute（onchange，check（this））;
document.getElementById（'inputs'）。appendChild（
document.createTextNode（Zahl+ counter +：））;
document.getElementById（'inputs'）。appendChild（element）;
document.getElementById（'inputs'）。appendChild（
document.createElement（br））;
counter ++;
myHash [e.name] =true;
}
}
函数检查（e）{
//alert（e.value）;
var str = e.value;
//alert (str.match(/\d*/））; $（$）
if（！（/ ^ \ d *。？\ d * $ | ^ \ d *。？\ d * $ /。test（str）））{
e.value =;
alert（Bitte nur Zahlen eingeben.\\\
（Nachkommastellen mit。oder，trennen））;
// alert（ok）;
} else {
//
}
}
函数visible（）{
document.getElementById（form ）.setAttribute（style，display：none）;
document.getElementById（result）
.setAttribute（style，display：block）;
返回false;
}
和这里是我的jsp文件的重要部分：
< div id =formstyle =width：350px;> ;
< fieldset>
< legend style =color：blue; font-weight：bold;> Der summende
Summanden Summer！< / legend>
< form method =post>
Zahl 1：< input type =textname =number1onchange =check（this）/>< br />
Zahl 2：< input type =textname =number2onkeyup =addInput（this）
onchange =check（this）/>< br />
< div id =inputs>< / div>
< br /> < input type =submitonclick =visible（）value =Summieren>
< input type =resetonclick =window.location.reload（）
value =Loeschen>
< / form>
< / fieldset>
< / div>
<％
Map< String，String []> params = request.getParameterMap（）;
double sum = 0;
字符串值=;
for（String param：params.keySet（））{
value = request.getParameter（param）;
value = value.replace（，，。）;
if（value！=）{
sum = Double.parseDouble（value）+ sum;
}
//out.println(sum）;
System.out.println（sum）;
}
％>
< div id =resultstyle =display：none>
< h2> Ergebnis< / h2>
<％=总和％>
< input type =submitonclick =return false;值= Ergebnis >
< / div>
有没有解决我的问题的方法？
< form onsubmit =return false>
这将阻止表单提交与服务器通信的AKA。您可以在javascript中使用DOM选择器来获得相同的结果，这可能会更清晰。
顺便说一句，在表单中有一些无效的标记可能会导致在遍历DOM。
I am new to JavaScript and jsp.
I need to submit a form, which calculates some values from input fields and hide the div which contains the input fields after submitting. After submitting another div should become visible and show me the result and a new submit button which reload the jsp page again, so that I can calculate other values.
Everything is working, but one problem still remains. After the form was submitted and the calculation was done, the new div with my result is shown but immediately the page reloads, so that I have no chance to see my result or press the new button for reloading the page.
Now I'm looking for a solution apart from using ajax and cookies for showing the result without reloading the jsp until I press the button for reloading.
This is my js code:
<script type="text/javascript">
counter = 3;
var myHash = {};
function addInput(e) {
//checking if current input field has already created a new input field.
if (!myHash.hasOwnProperty(e.name)) {
var element = document.createElement("input");
element.setAttribute("name", "number" + counter);
element.setAttribute("onkeyup", "addInput(this)");
element.setAttribute("onchange", "check(this)");
document.getElementById('inputs').appendChild(
document.createTextNode("Zahl " + counter + ": "));
document.getElementById('inputs').appendChild(element);
document.getElementById('inputs').appendChild(
document.createElement("br"));
counter++;
myHash[e.name] = "true";
}
}
function check(e) {
//alert(e.value);
var str = e.value;
//alert(str.match(/\d*/));
if (!(/^\d*.?\d*$|^\d*.?\d*$/.test(str))) {
e.value = "";
alert("Bitte nur Zahlen eingeben.\n(Nachkommastellen mit . oder , trennen)");
//alert("ok");
} else {
//
}
}
function visible() {
document.getElementById("form").setAttribute("style", "display:none");
document.getElementById("result")
.setAttribute("style", "display:block");
return false;
}
and here the important part of my jsp file:
<div id="form" style="width: 350px;">
<fieldset>
<legend style="color: blue; font-weight: bold;">Der summende
Summanden Summer!</legend>
<form method="post">
Zahl 1: <input type="text" name="number1" onchange="check(this)" /><br />
Zahl 2: <input type="text" name="number2" onkeyup="addInput(this)"
onchange="check(this)" /><br />
<div id="inputs"></div>
<br /> <input type="submit" onclick="visible()" value="Summieren">
<input type="reset" onclick="window.location.reload()"
value="Loeschen">
</form>
</fieldset>
</div>
<%
Map<String, String[]> params = request.getParameterMap();
double sum = 0;
String value = "";
for (String param : params.keySet()) {
value = request.getParameter(param);
value = value.replace(",", ".");
if (value != "") {
sum = Double.parseDouble(value) + sum;
}
//out.println(sum);
System.out.println(sum);
}
%>
<div id="result" style="display: none">
<h2>Ergebnis</h2>
<%=sum%>
<input type="submit" onclick="return false;" value="Ergebnis">
</div>
Is there any solution for my problem?
The simplest way by just looking at your code is to add a onsubmit="return false" attribute to your form tag:
<form onsubmit="return false">
This will prevent the form from submitting AKA communicating with the server. You achieve the same result using DOM selectors in the javascript as well, which might be cleaner.
BTW you have some invalid markup in your form that might cause errors when traversing the DOM.
这篇关于提交表单后，请防止重新加载页面。 （没有ajax）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
