formsjsphidden-fieldjst

Select an item from a list in JSTL

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>

output screen

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 !

Solution

    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>