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" >

现在，单击此按钮时，it's value will be sent to the server。在这种情况下，Advanced Search。

接下来，您需要检查此值是否已发送到JSP中的服务器：

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

注意：param是implicit object in Expression Language。

这样，当您第一次打开页面时，param.searchButton将为空，它将显示默认搜索。提交“高级搜索”按钮后，param.searchButton将为Advanced Search，高级搜索将会显示。

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

1 个答案: