I have a JSP page in which there are two forms.
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();
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.