Javascript 防止在提交表单后重新加载页面。（没有ajax）

我不熟悉JavaScript和jsp。 我需要提交一个表单，它从输入字段中计算一些值，并在提交后隐藏包含输入字段的

div

。提交另一个

div

后，应显示结果，并显示一个新的提交按钮，再次重新加载jsp页面，以便计算其他值

一切正常，但仍有一个问题。提交表单并完成计算后，会显示带有我的结果的新的

div

，但页面会立即重新加载，这样我就没有机会看到我的结果或按“新建”按钮重新加载页面

现在，除了使用ajax和Cookie来显示结果之外，我正在寻找一种解决方案，无需重新加载jsp，直到我按下按钮重新加载为止

这是我的js代码：

<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;       
}

计数器=3；
var myHash={}；
函数附加输入（e）{
//检查当前输入字段是否已创建新的输入字段。
如果（！myHash.hasOwnProperty（e.name））{
var元素=document.createElement（“输入”）；
元素.setAttribute（“名称”、“编号”+计数器）；
setAttribute（“onkeyup”、“addInput（this）”）；
setAttribute（“onchange”、“check（this）”）；
document.getElementById（'inputs'）.appendChild(
document.createTextNode（“Zahl”+计数器+：”）；
document.getElementById（'inputs'）.appendChild（元素）；
document.getElementById（'inputs'）.appendChild(
document.createElement（“br”）；
计数器++；
myHash[e.name]=“true”；
}
}
功能检查（e）{
//警觉（e.value）；
var-str=e.value；
//警报（str.match（/\d*/）；
如果（！（/^\d*？\d*$| ^\d*？\d*$/.test（str）））{
e、 value=“”；
警报（“Bite nur Zahlen eingeben.\n（Nachkommastellen mit.order，trennen）”；
//警报（“正常”）；
}否则{
//
}
}
函数可见（）{
document.getElementById（“表单”）.setAttribute（“样式”，“显示：无”）；
document.getElementById（“结果”）
.setAttribute（“样式”、“显示：块”）；
返回false；
}

这里是我的jsp文件的重要部分：

<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>

萨门德酒店
夏天到了！
扎尔1：

扎尔2：



厄尔盖布尼斯

---

我的问题有什么解决方案吗？

查看代码最简单的方法是在表单标记中添加

onsubmit=“return false”

属性：

<form onsubmit="return false">

这将阻止表单提交并与服务器通信。您也可以在javascript中使用DOM选择器获得相同的结果，这可能会更干净

顺便说一句，表单中有一些无效的标记，在遍历DOM时可能会导致错误。

好的。。。 通过使用jsp处理所有事情解决了问题

一个简单的if-else条件足以隐藏第一个div，并通过定义一个布尔变量显示另一个div，该布尔变量在计算完成时设置为true

---

无论如何thx:D

在脚本末尾添加return false并阻止js调用，这样它就不会重定向或刷新页面。我建议使用JavaScript重置表单，而不是重新加载页面。它更快，并节省您和用户的带宽。不过，请确保在重置之前请求确认。实际上，当浏览器正确实现时，您不需要向

输入type=“reset”

中添加代码。由于输入类型的原因，它将自行重置表单。将代码的重要部分添加到我的第一篇文章中…thx，但是添加此内容时，我的jsp不再计算。。。我将发布我的全部代码。。。