提交表单后防止重新加载页面。（没有阿贾克斯）

Posted 2023-02-22

技术标签:

【中文标题】提交表单后防止重新加载页面。（没有阿贾克斯）【英文标题】：Prevent reloading page after submiting form. ( no ajax ) 【发布时间】：2012-11-23 01:15:43 【问题描述】：

我是 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;

这里是我的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>

我的问题有什么解决办法吗？

【问题讨论】：

在脚本末尾添加return false，防止js调用，因此不会重定向或刷新页面。我建议使用 JavaScript 来重置表单，而不是重新加载页面。它更快，并节省您和用户的带宽。不过，请确保在重置之前要求确认。实际上，当浏览器正确实现时，您不需要向input type="reset" 添加代码。由于输入类型，它将自行重置表单。将我的代码的重要部分添加到我的第一篇文章中... 【参考方案1】：

仅查看代码的最简单方法是将onsubmit="return false" 属性添加到表单标签：