I am trying to dynamically add new radio buttons within a table. The add process works OK but the newly added items are not bound to the original group. I am new to web coding so hope you can help with this maybe trivial problem. This is my (fake) html.
<table)
<tbody id="myList">
<tr>
<td>Ace</td>
<td><input type="radio" name="radioCOL" id="1"></td>
</tr>
<tr>
<td>King</td>
<td><input type="radio" name="radioCOL" id="2"></td>
</tr>
</tbody>
</table>
Now I want to dynamically add another element via js. eg
<tr>
<td>Queen</td>
<td><input type="radio" name="radioCOL" id="3"></td>
</tr>
This is the jquery. (In the real code, the var's are not static)
<script>
$(document).ready(function(){
$('#btnAddItem').click(function() {
var newItem = "Queen"
var newID = 3;
var newRadio = '<tr><td>' newItem '</td> <td><input type="radio" name="radioCol" id="' newID '"></td></tr>';
$('#myList tr:first').before(newRadio);
});
});
</script>
The new element is added correctly however it is not bound to the original group. There are now two "radioCol" groups, first the original (Ace,King) group, second a new group (Queen). Adding additional items are added to the newer (Queen) group.
CodePudding user response:
Radio elements are grouped using name
attribute
Your other elements have radioCOL
, but your new element has radioCol
which are not the same