Extracting the column data corresponding to the button which is clicked in the same table row

Question

I am working on deleting functionality. Based on the search the table generates rows along with the delete buttons. when the button is clicked, the show id column value should be extracted from the table column and it should be sent to backend through ajax.

As a first step i am trying to extract show id column value from the same row where the delete button is clicked. but i am facing two issues

When i try to click the delete button, other search button is getting triggered.
I am not able to extract show id column value corresponding to the button click of the same row.

<script>
    
            $(document).ready(function(){
            
            $('#search-movie').on('submit',function (e) {
                 $.ajax({
                  type: 'POST',
                  url: '/search',
                  data: $('#search-movie').serialize(),
                   success: function (q) {
                   
                    var trHTML='';
                    $.each(q, function (i, userData) {
                                for(j=0; j<userData.length; j++)
                                {
                           
                                trHTML +=
                                        '<tr><td style="padding-right: 10px">'
                                        + userData[j].showid
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].typeof
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].title
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].directors
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].cast
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].country
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].releaseyear
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].rating
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].duration
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].listedin
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].description
                                        // + '</td></tr style="padding-right: 10px">'
                                        + '</td><td style="padding-right: 10px">'
                                        + '<button id="button2" class="btn btn-info" onClick="clickme()">delete</button>'
                                        + '</td></tr>'
                                }
                        });
                        $('#table1').append(trHTML);
                   
                   }
                  });
                 e.preventDefault();
                 });
            
            })
            </script>
            <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>

 <div class="form-group">
            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
            <button class="btn btn-info btn-md" id="button1" onClick="window.location.reload();">reset</button>
        </div>
        <table id="table1" name="table1">
            <thead>
                <tr>
                   <th style="padding-right: 10px">Show ID</th>    
                   <th style="padding-right: 10px"> Type</th>    
                   <th style="padding-right: 10px">Title</th>    
                   <th style="padding-right: 10px">Director</th>
                   <th style="padding-right: 10px">Cast</th>
                   <th style="padding-right: 10px">Country</th>
                   <th style="padding-right: 10px">Release Year</th>
                   <th style="padding-right: 10px">Rating</th>
                   <th style="padding-right: 10px">Duration</th>
                   <th style="padding-right: 10px">Listed In</th>
                   <th style="padding-right: 10px">Description</th>
    
                </tr>
              </thead>
              <tbody>
              </table>

You are creating multiple delete buttons but they all have the same ID, e.g. `' — kmoser, Mar 03 '22 at 05:26
but the requirement needs to create multiple buttons...how to fix this ? — Sagabarnisa S, Mar 03 '22 at 05:46
but if you can see the submit button and delete button have different id's. but i dont have any clue that why on clicking delete button, submit button is getting triggered — Sagabarnisa S, Mar 03 '22 at 05:47
The ID's are different for Delete and Search button...but why search is getting triggered on clicking Delete ? — Sagabarnisa S, Mar 03 '22 at 05:49

score 1 · Answer 1 · edited Mar 03 '22 at 16:20

Issue 1: This is due to button vs input type='submit'

seems your form submission happening and it goes to search functionality - when you click the delete button.

Use input type=button (Solution1)

or button on click as return false to avoid submission (solution 2)

Note: Don't forget, type="submit" is the default with button, so leave it off! Ref: input type="submit" Vs button tag are they interchangeable? 2. For on click, you can attach event using the CSS value. $(".btn btn-info").click(function() { .... or in DOM attach the clickme in onClick. Not required to have bot in the function definition.

 <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>

Extracting the column data corresponding to the button which is clicked in the same table row

1 Answers1