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

Question

I have a JSP page in which there are two forms.

• One is the default and another is hidden.
• On default form, there is a link to the hidden form. On click of this link, the hidden form appears which has some input fields and submit button.
• When I click on submit, obviously the form gets submitted.

But when the output comes, the page gets loaded and shows the default form. I want to show hidden form instead. What should I do?

My JSP page has following code structure:

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

And javascript functions are as follows:

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

    }

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

    }

Answer 1

The problem is, when you send any HTML page to the client, all changes you did with Javascript previously will be lost. That is why you see the default form visible again after submit.

What you want to do is:

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

What is something you need to do on server-side, because the client does not know which button submitted the form to the server.

So, you need check if the form was submitted by the "Advanced Search"-button on server side. To be able to do this, you need to give the button a name:

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

Now, when this button is clicked, it's value will be sent to the server . In this case, Advanced Search .

Next, you need to check if this value was sent to the server in your JSP:

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

Note: param is an implicit object in Expression Language .

This way, when you first open the page, param.searchButton will be empty and it will show the default search. When the "Advanced Search" button was submitted, param.searchButton will be Advanced Search , and the advanced search will be visible.