2

2 つのフォームがある JSP ページがあります。

  • 1 つはデフォルトで、もう 1 つは非表示です。
  • デフォルトのフォームには、非表示のフォームへのリンクがあります。このリンクをクリックすると、いくつかの入力フィールドと送信ボタンがある非表示のフォームが表示されます。
  • 送信をクリックすると、明らかにフォームが送信されます。

しかし、出力が来ると、ページが読み込まれ、デフォルトのフォームが表示されます。代わりに非表示のフォームを表示したい。私は何をすべきか？

私のJSPページには次のコード構造があります：

<div id="1st_form">

    <form id="defaultForm"  action="/searchModel/search">
       %{-- form input fields--}%

            <div style="float: left; margin-left: 15px;">
                <a href="javascript:advancedSearch();" style="color: #ffffff; font-size: 13px;">Advanced Search</a>
            </div>


    </form>
</div>

<div id="2nd_form" hidden="hidden">

    <form id="hiddenForm"  action="/searchModel/search">
       %{-- form input fields--}%
            <input type="submit" id="searchButton" value="Advanced Search" >

            <div style="float: left; margin-left: 15px;">
                <a href="javascript:normalSearch();" style="color: #ffffff; font-size: 13px;">Advanced Search</a>
            </div>


    </form>
</div>

また、javascript 関数は次のとおりです。

function advancedSearch(){
        $("#1st_form").hide();
        $("#2nd_form").show();

    }

    function normalSearch(){
        $("#2nd_form").hide();
        $("#1st_form").show();

    }
4

1 に答える 1

1

問題は、HTML ページをクライアントに送信すると、以前に Javascript で行ったすべての変更が失われることです。そのため、送信後にデフォルトのフォームが再び表示されます。

あなたがしたいことは次のとおりです。

「高度な検索」ボタンをクリックすると、「高度な検索」フォームが表示され、応答で「デフォルト」フォームが非表示になります。

クライアントはフォームをサーバーに送信したボタンがわからないため、サーバー側で行う必要があることは何ですか。

そのため、フォームがサーバー側の「高度な検索」ボタンによって送信されたかどうかを確認する必要があります。これを行うには、ボタンに名前を付ける必要があります。

<input type="submit" id="searchButton" 
       name="searchButton" value="Advanced Search" >

これで、このボタンをクリックすると、その値がサーバーに送信されます。この場合、Advanced Search.

次に、この値が JSP でサーバーに送信されたかどうかを確認する必要があります。

<div id="1st_form" ${param.searchButton == 'Advanced Search'?'hidden':''} >
    ...
</div>
<div id="2nd_form" ${param.searchButton == 'Advanced Search'?'':'hidden'} >
    ...
</div>

注:paramはExpression Language の暗黙的なオブジェクトです。

この方法では、最初にページを開いたときparam.searchButtonに空になり、デフォルトの検索が表示されます。「高度な検索」ボタンを送信param.searchButtonするとAdvanced Search、 になり、高度な検索が表示されます。

于 2013-09-11T07:31:10.180 に答える