2

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

    }
Forum User
  • 111
  • 1
  • 11
  • send a get varible along with the output, and in your page if get variable is set show your hidden form else default form – Voonic Sep 11 '13 at 05:59
  • i have edited ma question with a code.. how to send get variable with jsp page?? – Forum User Sep 11 '13 at 06:09
  • Your forms have both the ID `defaultForm`. IDs must be unique. Also, where are `1st_form` and `2nd_form` in your JSP, which you are using in Javascript? – Uooo Sep 11 '13 at 06:17
  • Does this JSP page calls itself using `/searchModel/search`? – Uooo Sep 11 '13 at 06:21
  • And how do you hide the non-default form? I can't see anything like that in your code. – Uooo Sep 11 '13 at 06:26

1 Answers1

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.

Community
  • 1
  • 1
Uooo
  • 6,204
  • 8
  • 36
  • 63
  • when i tried to put the tag, it gave error that this element is not allowed here.. and still i run the code, now it always loads 2nd_form div. Why?? – Forum User Sep 11 '13 at 07:46
  • @ForumUser Seems like you are not using [JSTL taglib](http://stackoverflow.com/tags/jstl/info). I updated my code so it works without it, however I would recommend to take a look at it. It is handy in a lot situations where you need to control the flow of the JSP page. – Uooo Sep 11 '13 at 07:53
  • @ForumUser Try using `==` instead of `eq`. – Uooo Sep 11 '13 at 08:05
  • now groovy code error has gone but still it is loading advanced search form first.. – Forum User Sep 11 '13 at 08:11
  • @ForumUser Do some debugging. Output the expressions `${param.searchButton}` and `${param.searchButton == 'Advanced Search'}` on your JSP to see what is actually in there. Do you always call the page using the "Advanced Search"-Button? – Uooo Sep 11 '13 at 08:14
  • @ForumUser Oh yeah, I oversaw this. Of course, if the "Advanced Search" Button was used to submit the form, the first form must be hidden, not the other way round. I will update my answer accordingly. – Uooo Sep 11 '13 at 08:21