2

JavaScript と jsp は初めてです。入力フィールドからいくつかの値を計算し、div送信後に入力フィールドを含むフォームを非表示にするフォームを送信する必要があります。送信後、別divの値が表示され、結果と新しい送信ボタンが表示され、jsp ページが再度リロードされるため、他の値を計算できます。

すべてが機能していますが、まだ 1 つの問題が残っています。フォームが送信されて計算が完了すると、新しいdiv結果が表示されますが、すぐにページがリロードされるため、結果を表示したり、ページをリロードするための新しいボタンを押したりする機会がありません。

今、リロードのボタンを押すまでjspをリロードせずに結果を表示するためにajaxとcookieを使用する以外の解決策を探しています。

これは私の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>

私の問題の解決策はありますか?

4

2 に答える 2

1

onsubmit="return false"コードを見るだけの最も簡単な方法は、フォームタグに属性を追加することです。

<form onsubmit="return false">

これにより、フォームがサーバーと通信するAKAを送信できなくなります。javascriptでDOMセレクターを使用しても同じ結果が得られますが、これはよりクリーンな場合があります。

ところで、フォームに無効なマークアップがあり、DOMをトラバースするときにエラーが発生する可能性があります。

于 2012-12-05T09:02:30.707 に答える
0

わかりました... jspですべてを処理することで問題を解決しました...

簡単な if-else 条件は、最初の div を非表示にし、計算が完了したときに true に設定されたブール変数を定義することで、他の div を表示するのに十分でした...

とにかくthx：D

于 2012-12-05T09:51:34.050 に答える