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

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 所做的所有更改都将丢失。这就是为什么您会在提交后看到默认表单再次可见的原因。

你要做的是:

When the "Advanced Search"-button is clicked, show the "Advances Search" form and make the "Default" form hidden in the response.

你需要在服务器端做什么，因为客户端不知道哪个按钮将表单提交给服务器。

因此，您需要检查表单是否由服务器端的“高级搜索”按钮提交。为此，您需要为按钮命名:

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

现在，单击此按钮时，it's value will be sent to the server .在这种情况下，高级搜索。

接下来，您需要检查这个值是否已发送到您的 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，高级搜索将可见。