Issue in functioning of radio input in dynamically adding row through jQuery-CodePudding

A new row is dynamically creating on clicking "add Row" button through function in jQuery. But when I select radio input in new row then selected value of previous radio input is removing. Please run and see the codes as below: enter image description here

function add_row(table_row_count)
{
    $("#add-row_" table_row_count).hide();
    $("#delete-row_" table_row_count).hide();
    
    var table_row_count = parseInt(table_row_count);
    
    table_row_count  = 1;
    
    var markup = 
    '<tr id="tbl_row_' table_row_count '" >' 
    '<td><label>' table_row_count '</label></td>' 
    '<td>' 
          '<label>Value in Range? :</label>'  
          '<input type="radio" name="option" id="option_1_row_' table_row_count '" value="1"  > YES'  
          '<input type="radio" name="option" id="option_2_row_' table_row_count '" value="2"  > NO'                       
    '</td>' 
    '<td id="capacity_from_row_' table_row_count '" >' 
            '<label>Range From :</label><br>' 
            '<input type="text" name="capacity_from[]" id="capacity_from_' table_row_count '"  />'                         
    '</td>' 
    '<td>' 
            '<label id="lbl_capacity_range_' table_row_count '" >Range Upto :</label><br>' 
            '<input type="text" name="capacity_upto[]" id="capacity_upto_' table_row_count '" />'               
     '</td>'              
    '<td ><a href="javascript:void(0)"  id="add-row_' table_row_count '"  onClick="add_row(\'' table_row_count '\');" ><i  aria-hidden="true"></i> Add Row</a></td>' 
    '<td ><a href="javascript:void(0)"  id="delete-row_' table_row_count '" onClick="delete_row(\'' table_row_count '\');" ><i  aria-hidden="true"></i> Delete Row</a></td>' 
    '</tr>';
    
    var table = $("#tbl_details tbody");
    table.append(markup);
    
     
}


function delete_row(table_row_count)
{
    var r = confirm("Are you sure to delete row");
    if(r == false){
        return;
    }
    
    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    $("#add-row_" previous_row).show();
    if(previous_row != 1){
        $("#delete-row_" previous_row).show();
    }
    
    $("#tbl_row_" table_row_count).remove();
            
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
        <h3>Enter Details</h3>
        <table  id="tbl_details">    
        <tbody>     
        <tr id="row_1">
        <td>1.</td>
        <td>
          <label>Value in Range? :</label> 
          <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES  
          <input type="radio" name="option" id="option_2_row_1" value="2" > NO       
        </td>
        <td id="capacity_from_row_1" >
            <label>Range From :</label><br>
            <input type="text" name="capacity_from[]" id="capacity_from_1" />        
        </td>
        <td>
            <label id="lbl_capacity_range_1" >Range Upto :</label><br>
            <input type="text" name="capacity_upto[]" id="capacity_upto_1" />                   
        </td>   
        <td ><a href="javascript:void(0)"  id="add-row_1" onClick="add_row(1);" ><i  aria-hidden="true"></i> Add Row</a></td>
        <td ></td>
        </tr>
        </tbody>
        </table>
</body>
</html>

How to solve the issue. kindly help me. Thanks in advance.

CodePudding user response：

Different radio button groups are created when the name attribute of the radio buttons is different. Also, in the solution below, I made it easier to express dynamic content by using template literals.

Note the following statement in the dynamic element written into the markup variable in the add_row() method:

<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO

/* This variable will be used to create new radio button groups. */
let counter = 0;

function add_row(table_row_count) {
    $("#add-row_" table_row_count).hide();
    $("#delete-row_" table_row_count).hide();
    var table_row_count = parseInt(table_row_count);
    table_row_count  = 1;
    
    /* With each iteration, the content of the counter variable is incremented. */
      counter;
    
    var markup = 
         `<tr id="tbl_row_${table_row_count}">
              <td>
                  <label>${table_row_count}</label>
              </td>

              <td>
                  <label>Value in Range? :</label>
                  
                  <!-- Note the name="option${counter}" statement so that the radio buttons have different groups. -->
                  <input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
                  <input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO                   
              </td>

              <td id="capacity_from_row_${table_row_count}">
                  <label>Range From :</label><br>
                  <input type="text" name="capacity_from[]" id="capacity_from_${table_row_count}"/>                     
              </td>

              <td>
                  <label id="lbl_capacity_range_${table_row_count}">Range Upto :</label><br>
                  <input type="text" name="capacity_upto[]" id="capacity_upto_${table_row_count}"/>
              </td>

              <td >
                  <a href="javascript:void(0)"  id="add-row_${table_row_count}" onClick="add_row('${table_row_count}');" >
                      <i  aria-hidden="true"></i> Add Row
                  </a>
              </td>

              <td >
                  <a href="javascript:void(0)"  id="delete-row_${table_row_count}" onClick="delete_row('${table_row_count}');" >
                      <i  aria-hidden="true"></i> Delete Row
                  </a>
              </td>
          </tr>`
    
    var table = $("#tbl_details tbody");
    table.append(markup);
}

function delete_row(table_row_count) {
    var r = confirm("Are you sure to delete row");
    
    if(r == false){
        return;
    }
    
    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    
    $("#add-row_" previous_row).show();
    if(previous_row != 1){
        $("#delete-row_" previous_row).show();
    }
    
    $("#tbl_row_" table_row_count).remove();
            
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table  id="tbl_details">    
  <tbody>     
    <tr id="row_1">
      <td>1.</td>
      <td>
        <label>Value in Range? :</label> 
        <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES  
        <input type="radio" name="option" id="option_2_row_1" value="2" > NO       
      </td>
      <td id="capacity_from_row_1" >
          <label>Range From :</label><br>
          <input type="text" name="capacity_from[]" id="capacity_from_1" />        
      </td>
      <td>
          <label id="lbl_capacity_range_1" >Range Upto :</label><br>
          <input type="text" name="capacity_upto[]" id="capacity_upto_1" />                   
      </td>   
      <td ><a href="javascript:void(0)"  id="add-row_1" onClick="add_row(1);" ><i  aria-hidden="true"></i> Add Row</a></td>
      <td ></td>
    </tr>
  </tbody>
</table>
</body>
</html>

CodePudding user response：

This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.

For Example

1.) If you have two radios with same name Only one value can be selected at a time.

2.) Now after adding another row your code will look like

<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>

name is same for all radio buttons so only one will be selected at a time.

Fix:

In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.

'<td>' 
          '<label>Value in Range? :</label>'  
          '<input type="radio" name="option_' table_row_count '" id="option_1_row_' table_row_count '" value="1"  > YES'  
          '<input type="radio" name="option_' table_row_count '" id="option_2_row_' table_row_count '" value="2"  > NO'                       
    '</td>'

Fixing this will fix the issue.

CodePudding user response：

*** Change dynamic radio input name. here, your code create all dynamic radio input with the same name. ***