Select an item from a list in JSTL

Question

In the following JSP , i have a list which i am iterating and printing with an additional button

JSP

<form action="servlet">
                                <table border="2">
                                    <th>Req no</th>
                                    <th>username</th>
                                    <th>Leave Type</th>
                                    <th>No of Days Requested</th>
                                    <th>Status</th>
                                    <th>Approve</th>
                                    <c:forEach var="pro" items="${userRequest}">
                                        <tr>
                                            <td><c:out value="${pro.reqno}"></c:out></td>
                                            <td><c:out value="${pro.user_name}"></c:out></td>
                                            <td><c:out value="${pro.leave_Type}"></c:out></td>
                                            <td><c:out value="${pro.no_of_days}"></c:out></td>
                                            <td><c:out value="${pro.status}"></c:out></td>
                                            <td><input type="submit" value="approve"></td>
                                            <td><input type="hidden" name="approve" value="yes"></td>
                                            <td><input type="hidden" name="reqno" value="${pro.reqno}"></td>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </form>

If i click on the approve button in my form , the hidden fields takes the value of all the rows . I need to post reqno from individual row alone (i.e) the row which i click the button. Please suggest me an idea . Thanks in advance !

Answer 1

1. You need to change Approve button from 'submit' type to 'button' type.

2. You remove 'hidden' input in TR.

3. Sample codes:

   <tr>
       <td><c:out value="${pro.reqno}"></c:out></td>
       <td><c:out value="${pro.user_name}"></c:out></td>
       <td><c:out value="${pro.leave_Type}"></c:out></td>
       <td><c:out value="${pro.no_of_days}"></c:out></td>
       <td><c:out value="${pro.status}"></c:out></td>
   
       <td><input type="button" class="btnApproveReq" data-reqno="${pro.reqno}" value="approve"></td>
   </tr>
   

4. use jQuery to handle onclick:

   <script type="text/javascript">
       $(document).ready(function () {
   
            $(".btnApproveReq").click( 
                function() {
                    var selectedReqNo = $(this).attr("data-reqno");
   
                    var urlToApprove = "/yourApp/req/approve?reqno=" + selectedReqNo;
   
                    // CALL AJAX to urlToApprove 
   
                    // Call this If you want to remove TR after AJAX success
   
                    // $(this).parent() --> TD
                    // $(this).parent().parent() --> TR
                    $(this).parent().parent().remove();
                }
            );
       });
   </script>