how to pass value from dynamic table to bootstrap modal

Question

I have created a dynamic table by fetching data from SQL using PHP. each row has an edit button that is linked to modal. I want to pass the value from table to modal so that I can edit it.

I have tried looping trough table row and able to get the values of different columns. However, every time I clicked any edit buttons, only the last of the row is being passed on to the input on modal.

here is my markup: Modal

<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm" role="document">
                                    <form role="form" method="POST" action="php/add_category.php">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Category</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <input type="hidden" class="form-control" name="categoryID" id="categoryID">
                                                    <label for="category">Category</label>
                                                    <input type="text" class="form-control" name="category" required id="category">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

Table

<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
                                            <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
                                            <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($categories as $category){ ?>  
                                        <tr class="footable-even" style="">
                                            <td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
                                                <?php echo $category['categoryID']; ?>
                                            </td>
                                            <td class="footable-visible" id="tdCategory">
                                            <?php echo $cakeOrdering->escape($category['category']); ?>
                                            </td> 
                                            <td class="text-right footable-visible footable-last-column">
                                                <div class="btn-group">
                                                    <button class="btn-white btn btn-xs">Delete</button>
                                                    <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php } ?>
                                    </tbody>
                                </table>

Script

<script  type="text/javascript">
   $(document).ready(function () {
        var table = document.getElementById("main-table");
        $('#main-table tr').each(function(i, row){
            var $row = $(row);

            var category = $row.find('td:nth-child(2)').text().trim();
            console.log(category);
            $('#category').val(category);
        });   
    });
</script>

This is the output Output

When I tried to print values into console. Console.log

Answer 1

You are setting value of category in input box inside each loop that's the reason last value is set. Instead you can write click event on edit button so on click of this button get category name and put it inside modal input-box.

Demo code :

 $(document).ready(function() { //on click modal buton $(".editCategory").on("click", function() { var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name $('#category').val(category); //set value }) });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <form role="form" method="POST" action="php/add_category.php"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Category</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <input type="hidden" class="form-control" name="categoryID" id="categoryID"> <label for="category">Category</label> <input type="text" class="form-control" name="category" required id="category"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button> </div> </div> </form> </div> </div> Table <table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15"> <thead> <tr> <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th> <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th> <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th> </tr> </thead> <tbody> <tr class="footable-even" style=""> <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1 </td> <td class="footable-visible"> abc </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <!--use class here--> <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button> </div> </td> </tr> <tr class="footable-even" style=""> <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2 </td> <td class="footable-visible"> abcd </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <!--use class here--> <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button> </div> </td> </tr> </tbody> </table>

Answer 2

To achieve what you require you can hook to the show.bs.modal event. In the event handler you can get a reference to the button which was clicked. You can use that reference to traverse the DOM to find the related td which holds the name of the category. Finally you can set the value of the input in the modal with that category name.

As an aside I would strongly suggest you remove the id attributes from the HTML content you create in the PHP loop as id need to be unique within the DOM. Similarly, remove the inline style attributes as styling should be places within external stylesheets.

With all that said, try this:

 $('#modalCategory').on('show.bs.modal', e => { var $button = $(e.relatedTarget); $('#category').val($button.closest('td').prev().text().trim()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <form role="form" method="POST" action="php/add_category.php"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Category</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <input type="hidden" class="form-control" name="categoryID" id="categoryID"> <label for="category">Category</label> <input type="text" class="form-control" name="category" required id="category"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button> </div> </div> </form> </div> </div> <table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15"> <thead> <tr> <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th> <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th> <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th> </tr> </thead> <tbody> <tr class="footable-even"> <td class="footable-visible footable-first-column"> <span class="footable-toggle"></span> CategoryID_1 </td> <td class="footable-visible"> Category 1 </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button> </div> </td> </tr> <tr class="footable-even"> <td class="footable-visible footable-first-column"> <span class="footable-toggle"></span> CategoryID_2 </td> <td class="footable-visible"> Category 2 </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button> </div> </td> </tr> </tbody> </table>