How to display or hide any HTML element on the basis of conditions on the JSP page using JSTL. JSP is Java Server Page where we can write HTML code as well as we can run java code.
Yes, Java provides if-else and switch statements to handle business conditions. But while we are using advanced java frameworks like spring and hibernate. We must have to use JSTL for best practices. In this tutorial, We will see how to display or hide Buttons, inputs, links, or any HTML tag on the basis of conditions on a JSP page using JSTL.
JSTL configuraiton
To enable the JSTL support make sure, you have added the below JSTL lib at the top of the webpage
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
Display or hide HTML element on condition in JSP page using JSTL
Handle single condition By using if else in JSTL
<c:if test="${Condition}"> </c:if> is used to put the condition in JSTL. User the test attribute we need to put the required condition for example test=”${userRole=’Admin’}”
<c:if test="${Condition}">
<p>This paragraph will only be displayed if the condition is true.</p>
</c:if>
Handle multiple conditions By using the switch in JSTL
<c:choose></c:choose> is used to implement the switch case into JSTL, also will use <c:when test=”${Condition}”></c:when>
and <c:otherwise></c:otherwise> as a child tag to add the multiple conditions.
<c:choose>
<c:when test="${Condition}">
<p>This paragraph will be displayed if the Conditionis true.</p>
</c:when>
<c:otherwise>
<p style="display:none;">This paragraph will be hidden if the Condition is false.</p>
</c:otherwise>
</c:choose>
Display or hide the Button on condition in the JSP page using JSTL
Now, let’s take a real project development example to display or hide the button on a condition.
In the below example, we are going to display the list of Hotels Bookings with the Edit and Delete options for an admin user. and Hide the Edit and Delete buttons for the customers and display the book button only for the customers.
<c:choose>
<c:when test="${sessionScope.user.userRole == 'User' }">
<a href="${pageContext.request.contextPath}/booking?id=${li.id}">Book</a>
</c:when>
<c:otherwise>
<a href="${pageContext.request.contextPath}/hotelEdit?id=${li.id}">Edit</a>
<a href="${pageContext.request.contextPath}/hotelDelete?id=${li.id}">Delete</a>
</c:otherwise>
</c:choose>
Complete code to display hotel list on the basis of conditions
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="crt"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hotel List</title>
</head>
<body class="bg-image bgimage">
<div class="container">
<h2 style="padding: 30px">Hotel List</h2>
<%@include file="businessMessage.jsp" %>
<table class="table bg-light text-dark">
<thead>
<tr>
<th scope="col">Hotel Name</th>
<th scope="col">City</th>
<th scope="col">Address</th>
<th scope="col">Contact</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="li" varStatus="u">
<tr>
<td>${li.hotelName}</td>
<td>${li.city}</td>
<td>${li.address}</td>
<td>${li.contact}</td>
<td>${li.price}</td>
<td>
<c:choose>
<c:when test="${sessionScope.user.userRole == 'User' }">
<a href="${pageContext.request.contextPath}/booking?id=${li.id}">Book</a>
</c:when>
<c:otherwise>
<a href="${pageContext.request.contextPath}/hotelEdit?id=${li.id}">Edit</a>
<a href="${pageContext.request.contextPath}/hotelDelete?id=${li.id}">Delete</a>
</c:otherwise>
</c:choose>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</body>
</html>
