Retain the value of Drop down box in jsp

lakkarajumurali
lakkarajumurali used Ask the Experts™
on
Hi,

I have a JSP with several drop down boxes.  When the user clicks on submit button the page is submitted and again redirected to the same page with some results added in the bottom of the page.  In this process, the values which are selected in the drop down box are also refreshed (expected).  Now i want to retain the selected value in the drop down box, which am not finding a way to do it through jsp or javascript.  Here is my code snippet:

<form action="tremorEntry.do" method="post" id="teForm">
      <div id="dataEntryPoint" style=" background-color: activeborder; table-layout: auto; margin: 2px; margin-top:10px; margin-left:10px; width:1200px; height:80px; border: thin; border-color: black; border-style: dotted; ">
            <table>
                  <tr>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="startDateLbl" class="setFont" >Start Date/Time : </label>
                        </td>
                        <td>
                              <input id="startDate" class="setFont" name="startDate" title="Start Date/Time" type="text" value="<% out.write(request.getParameter("startDate")); %>"/>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="endDateLbl" class="setFont" >End Date/Time : </label>
                        </td>
                        
                        <td>
                              <input id="endDate" name="endDate" class="setFont" title="End Date/Time" type="text" value="<% out.write(request.getParameter("endDate")); %>"/>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="view" class="setFont" >View : </label>
                        </td>
                        <td>
                              <select id="view" name="view" class="setFont" style="width: auto;" tabindex="0">
                                    <option selected="selected">Choose One</option>
                                    <option>Vertical</option>
                                    <option>Component</option>
                                    <option>Widget</option>
                                    <option>User Guid</option>
                                    <option>Session Id</option>
                                    <option>Root Guid</option>
                              </select>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="applicationLbl" class="setFont" >Application : </label>
                        </td>
                        <td>
                              <select id="application" name="application" class="setFont" style="width: auto;" tabindex="0">
                                    <option>Choose One</option>
                                    <option>Build Reports</option>
                                    <option>Clear App</option>
                                    <option selected="selected">Security</option>
                                    <option>Document</option>
                                    <option>Clear EDD</option>
                                    <option>Unknown</option>
                              </select>
                        </td>
                  </tr>      
                  <tr style="height: 20px;">
                  </tr>
                  <tr>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="timeRangeLbl" class="setFont" >Time Range: </label>
                        </td>
                        <td>
                              <select id="timeRangeSel" name="timeRangeSel" class="setFont" style="width: auto;" tabindex="0">
                                    <option selected="selected">15 Minute</option>
                                    <option>Minute</option>
                                    <option>Day</option>
                                    <option>Month</option>
                              </select>
                        </td>                        
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="middleTierLbl" class="setFont" >Middle Tier : </label>
                        </td>
                        <td>
                              <select id="middleTierSel" name="middleTierSel" class="setFont" style="width: auto;" tabindex="0">
                                    <option selected="selected">Client</option>
                                    <option>Production</option>
                              </select>
                        </td>
                        <td style="width: 80px;">
                        </td>
                        <td>
                              <span id="submitSpan">
                                          <input id="submitBtn" value="Submit" type="submit"/>
                                          <input id="hiddenBtn" type="hidden"/>
                              </span>
                        </td>
                  </tr>
            </table>
      </div>
</form>

Thanks,
Murali.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try with the below code..
 
<select id="view" name="view" class="setFont" style="width: auto;" tabindex="0">
  <option value="" selected="selected">Choose One</option>
  <option value="Vertical" <% if(request.getParameter("view").equals("Vertical") { out.println("selected='selected'); }  %>>Vertical</option>
  <option value="Component" <% if(request.getParameter("view").equals("Component") { out.println("selected='selected'); }  %>>Component</option>
  <option value="Widget" <% if(request.getParameter("view").equals("Widget") { out.println("selected='selected'); }  %>>Widget</option>
  <option value="User Guid" <% if(request.getParameter("view").equals("User Guid") { out.println("selected='selected'); }  %>>User Guid</option>
  <option value="Session Id" <% if(request.getParameter("view").equals("Session Id") { out.println("selected='selected'); }  %>>Session Id</option>
  <option value="Root Guid" <% if(request.getParameter("view").equals("Root Guid") { out.println("selected='selected'); }  %>>Root Guid</option>
</select>

Open in new window


BR-Sudhindra-www.clicksperday.com

Author

Commented:
it says selected cannot be resolved.  here is how it is now.

<option value="<%if(request.getParameter("view").equals("Vertical")) {out.println(selected="selected"); } %>">Vertical</option>
sorry change it to...

<option value="<%if(request.getParameter("view").equals("Vertical")) {out.println('selected="selected"'); } %>">Vertical</option>

Author

Commented:
am getting the following exception:

org.apache.jasper.JasperException: An exception occurred processing JSP page /WEB-INF/jsp/VtqForm.jsp at line 217

214:                         <td>
215:                               <select id="view" name="view" class="setFont" style="width: auto;" >
216:                                     <option value="" selected="selected">Choose One</option>
217:                                     <option value="<%if(request.getParameter("view").equals("Vertical")) {out.println("selected='selected'"); } %>">Vertical</option>
218:                                     <option value="<%if(request.getParameter("view").equals("Component")) {out.println("selected='selected'"); } %>">Component</option>
219:                                     <option value="<%if(request.getParameter("view").equals("Widget")) {out.println("selected='selected'"); } %>">Widget</option>
220:                                     <option value="<%if(request.getParameter("view").equals("User Guid")) {out.println("selected='selected'"); } %>">User Guid</option>


Stacktrace:
      org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:510)
      org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:419)
      org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
      org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
      javax.servlet.http.HttpServlet.service(HttpServlet.java:717)

root cause

java.lang.NullPointerException
      org.apache.jsp.WEB_002dINF.jsp.VtqForm_jsp._jspService(VtqForm_jsp.java:350)
      org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
      javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
      org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)
      org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
      org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
      javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
Commented:
JSP and JavaScript can work together. In the following code, I retain the values in the first two selects. You can do the same for the third and fourth.
<%
   String viewValue = request.getParameter("view");
   if(viewValue == null)viewValue = "Choose One";
   String applicationValue = request.getParameter("application");
   if(applicationValue == null)applicationValue = "Security";

%>
<html>
<head>
<script>
         function retainValue(){
              var element1 = document.forms[0].view;
              for(x = 0; x < element1.length; x++){
                      if(element1.options[x].value == "<%=viewValue%>"){
                            element1.options[x].selected = true;
                            break;
                      } 
              }
              var element2 = document.forms[0].application;
              for(x = 0; x < element2.length; x++){
                      if(element2.options[x].value == "<%=applicationValue%>"){
                            element2.options[x].selected = true;
                            break;
                      } 
              }
         }
</script>
</head>
<body onload="retainValue();">
<form method="post" id="teForm">
      <div id="dataEntryPoint" style=" background-color: activeborder; table-layout: auto; margin: 2px; margin-top:10px; margin-left:10px; width:1200px; height:80px; border: thin; border-color: black; border-style: dotted; ">
            <table>
                  <tr>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="startDateLbl" class="setFont" >Start Date/Time : </label>
                        </td>
                        <td>
                              <input id="startDate" class="setFont" name="startDate" title="Start Date/Time" type="text" value="<% out.write(request.getParameter("startDate")); %>"/>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="endDateLbl" class="setFont" >End Date/Time : </label>
                        </td>
                        
                        <td>
                              <input id="endDate" name="endDate" class="setFont" title="End Date/Time" type="text" value="<% out.write(request.getParameter("endDate")); %>"/>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="view" class="setFont" >View : </label>
                        </td>
                        <td>
                              <select id="view" name="view" class="setFont" style="width: auto;" tabindex="0">
                                    <option value="Choose One">Choose One</option>
                                    <option value="Vertical">Vertical</option>
                                    <option value="Component">Component</option>
                                    <option value="Widget">Widget</option>
                                    <option value="user Guid">User Guid</option>
                                    <option value="Session Id">Session Id</option>
                                    <option value="Root Guid">Root Guid</option>
                              </select>
                        </td>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="applicationLbl" class="setFont" >Application : </label>
                        </td>
                        <td>
                              <select id="application" name="application" class="setFont" style="width: auto;" tabindex="0">
                                    <option value="Choose One">Choose One</option>
                                    <option value="Build Reports">Build Reports</option>
                                    <option value="Clear App">Clear App</option>
                                    <option value="Security">Security</option>
                                    <option value="Document">Document</option>
                                    <option value="Clear EDD">Clear EDD</option>
                                    <option value="Unknown">Unknown</option>
                              </select>
                        </td>
                  </tr>      
                  <tr style="height: 20px;">
                  </tr>
                  <tr>
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="timeRangeLbl" class="setFont" >Time Range: </label>
                        </td>
                        <td>
                              <select id="timeRangeSel" name="timeRangeSel" class="setFont" style="width: auto;" tabindex="0">
                                    <option selected="selected">15 Minute</option>
                                    <option>Minute</option>
                                    <option>Day</option>
                                    <option>Month</option>
                              </select>
                        </td>                        
                        <td style="width: 2pc"></td>
                        <td>
                              <label id="middleTierLbl" class="setFont" >Middle Tier : </label>
                        </td>
                        <td>
                              <select id="middleTierSel" name="middleTierSel" class="setFont" style="width: auto;" tabindex="0">
                                    <option selected="selected">Client</option>
                                    <option>Production</option>
                              </select>
                        </td>
                        <td style="width: 80px;">
                        </td>
                        <td>
                              <span id="submitSpan">
                                          <input id="submitBtn" value="Submit" type="submit"/>
                                          <input id="hiddenBtn" type="hidden"/>
                              </span>
                        </td>
                  </tr>
            </table>
      </div>
</form>

</body>
</html>

Open in new window

Author

Commented:
thanks it works!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial