如何在加載時顯示隱藏的表單

Question

我有一個JSP頁面，其中有兩種形式。

• 一個是默認設置，另一個是隱藏的。
• 在默認表單上，有指向隱藏表單的鏈接。 單擊此鏈接后，將顯示隱藏的表單，其中包含一些輸入字段和提交按鈕。
• 當我單擊提交時，顯然表單已提交。

但是，當輸出到來時，頁面將被加載並顯示默認表單。 我想顯示隱藏形式。 我該怎么辦？

我的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();

    }

Answer 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和高級搜索將是可見的。