Question

This question might have been asked many times, I have been having difficulty in applying approach which are given on different websites.

I have a JSP page which contains a search field

 ---------------------
|                     |   Type a Character to Search from the Database
|                     |  
 ---------------------

             =============
            |   Submit    |           
             ============= 

When the user types in a character and clicks on the Submit button, I am calling a different JSP “xyz.jsp” like

    <div id="searchPage">
    <%@include file="searchResult.jsp"%>
    </div>

My requirement is When the page gets loaded, it should display only the search text box and a submit button. When he/she click on the submit button, the div which is including another jsp should get called and displayed.

Note

I need to retain the value entered by the user in the search text field on the click on submit button.

Code for search page

<div id="Search1">
    <aui:form action="......" method="post" name="searchForm" id="searchFormId">

        <aui:input id='name' name="name" label="Student Name" type="text"       value=""   size="50"/>

    </aui:form>
 </div>

Answer 1

You can do something like this

<script type="text/javascript">
function showResult(){

    var ele = document.getElementById("Search1");
    if(ele.style.display == "block") {
            ele.style.display = "block";
      }
    else {
        ele.style.display = "none";
    }

}
</script>