Search code examples
formsjspstruts

How to disable drop down list in JSP?

I use Java 7, Struts 1.2.7, Servelt 2.4, JSP 1.2

I have an Action adminHome.do and a jsp page adminHome.jsp

This is adminHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
         "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Home</title>
</head>
<body>


<table bgcolor="white" border=0 cellpadding=2 cellspacing=2>
  <html:form action="/adminHome.do" method="post"> 
        <tr><td class="lightblue" align=right>email: </td>
            <td><html:text size="40" property="email"/></td></tr>
        <tr><td class="lightblue" align=right>first name: </td>
            <td><html:text size="40" property="firstName"/></td></tr>
        <tr><td class="lightblue" align=right>last name: </td>
            <td><html:text size="40" property="lastName"/></td></tr>
        <tr><td class="lightblue" align=right>user id: </td>
            <td><html:text size="40" property="userId"/></td></tr>
        <tr><td class="lightblue" align=right>competition: </td>
            <td><html:select property="competitionId">
               <c:forEach var="competition" items="${competitionsSorted}">
                 <html:option value="${competition.competitionId}">${competition}
                 </html:option>
               </c:forEach>
             </html:select></td></tr>
        <tr><td align=center colspan=2><br/>
                  <html:submit property="submit" value="search"/>
               </td>
       </tr>
  </html:form> 
</table>


</body>
</html>

admin form searching of user example

+-----------------+------------------------+
| Email           |                        |
+-----------------+------------------------+
| First Name      |                        |
+-----------------+------------------------+
| Last Name       |                        |
+-----------------+------------------------+ 
| User            |     123                |  <- UserID = 123
+-----------------+------------------------+
| Competition     |     Competition 1      |
+-----------------+------------------------+
                      | Competition 2  |
                      | Competition 3  |  <- drop down list
                      | Competition 4  | 
                      +----------------+

In this admin form

I want to have disabled competition drop down list if userId is not empty.

Solution

  • This can be done with plain javascript.

    Below code should work for you.

    <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Admin Home</title>
  <script>
    function disable()
    {
       document.forms[0].competitionId.disable();
    }
  </script>
</head>
<body>
  <table bgcolor="white" border=0 cellpadding=2 cellspacing=2>
    <html:form action="/adminHome.do" method="post"> 
      <tr><td class="lightblue" align=right>email: </td>
          <td><html:text size="40" property="email"/></td></tr>
      <tr><td class="lightblue" align=right>first name: </td>
          <td><html:text size="40" property="firstName"/></td></tr>
      <tr><td class="lightblue" align=right>last name: </td>
          <td><html:text size="40" property="lastName"/></td></tr>
      <tr><td class="lightblue" align=right>user id: </td>
          <td><html:text size="40" property="userId" onblur="disable()"/></td></tr>
      <tr><td class="lightblue" align=right>competition: </td>
          <td><html:select property="competitionId">
           <c:forEach var="competition" items="${competitionsSorted}">
             <html:option value="${competition.competitionId}">${competition}
             </html:option>
           </c:forEach>
         </html:select></td></tr>
    <tr><td align=center colspan=2><br/>
              <html:submit property="submit" value="search"/>
           </td>
   </tr>
</html:form> 
</table>
</body>
</html>

    Let me know if you have any further questions.