Prevent reloading page after submiting form. ( no ajax )

Question

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?

Answer 1

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.

Answer 2

Ok... solved the problem by handling everthing with jsp...

An easy if-else condition was enough to hide the first div and show the other by defining a boolean variable which is set to true, when the calculation is done...

thx anyway:D