How to add a row ID in django-tables to get the selected radio button from the specific row

Question

I am trying to use the jQuery to get the row that selected radio is in and also the selected radio button value when using django-tables2.

So, I have three columns in a table and I rendered it with django-tables2. The third columns is templatecolumn with the HTML template (buttons.html:

<form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form>

I then add templatecolumn to the table ( I created my own table class by inheriting from tables.Table):

myTableCol={}
        mylist = []
        for i in queryResults:
            mydic = {}
            for j in i:
                className=str(type(j)).split(".")[1]
                mydic.update({className: j.name})
                myTableCol.update({className: tables.Column()})
            mylist.append(mydic)
        myTableCol.update({'Action': tables.TemplateColumn(template_name="buttons.html", verbose_name=("Actions"), orderable=True)})
        Meta = type('Meta', (object,), {'template_name':"django_tables2/bootstrap4.html", 'attrs':{"class": "paleblue"},})
        myTableCol.update({'Meta':Meta})
        QueryTable2=type('QueryTable', (tables.Table,), myTableCol)

The table is then rendered using {% render_table table %} that gives the html below. I am trying to get which radio button that was selected for the row.

$(document).ready(function () {
        $('input').click(function() {
            var $selectedButton = $('input[name=result]:checked').val();
            var $row = $(this).closest("tr");
            var $rowData = $row.children("td").map(function() {
                        return $(this).text();
                    }).get();
                    alert($selectedButton);
                    });});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="table-container">  
        <table class="paleblue">
                <thead class="thead-default" >
                <tr>                
                    <th class="orderable">                        
                            <a href="?sort=UseCase">UseCase</a>                        
                    </th>                
                    <th class="orderable">                        
                            <a href="?sort=MainFlow">MainFlow</a>                        
                    </th>                        
                    <th class="orderable">                        
                            <a href="?sort=Action">Actions</a>                        
                    </th>                
                </tr>
                </thead>                  
                <tbody >             
                    <tr scope="row" class="even">                        
                            <td >UC3_Make_Online_Payments</td>                        
                            <td >UC3_BasicFlowGroup_BF_5</td>                      
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    <tr scope="row" class="odd">
                            <td >UC9_Create_New_Account</td>
                            <td >UC9_BasicFlowGroup_BF_3</td>
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    
                
                    
                    <tr scope="row" class="even">
                        
                            <td >UC5_Login</td>
                        
                            <td >UC5_BasicFlowGroup_BF_3</td>
                        
                            
                        
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>       
                    </tr>            
                </tbody>
        </table>
</div>

The problem is that when a radio button is selected the value is based on the first row radio button that was selected. I am aware it would better to use form id selector instead of form class in the button.html, but I do not know how access the specific radio button from the specific table row.

How do I add a css id selector dynamically to a rendered table to the form and then use jquery to get the selected radio button?

Answer 1

To get the selected input, simply use

var $selectedButton = $(this).val();

instead of

var $selectedButton = $('input[name=result]:checked').val();

Fiddle