如何在加载时显示隐藏的表单

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和高级搜索将是可见的。