CODEWITHSUNDEEP
javascriptjqueryhtml
Justin
Justin

Reputation: 585

Add JQuery functionality to dynamically created radio buttons

I'm currently trying to add a jQuery function to a row of radio buttons. The problem is that I need to add dynamically many rows. Now For this example I only added 2 elements into the array of newNodes, but in my application newNodes can potentially have many different sizes.

So basically I want to add the Query function something like this:

$('#rowID input').on('change', function() {
    alert($('input[name=i]:checked', '#rowID').val()); 
});

Where it exists inside the forloop and is added for each new row. "rowID" is a variable assigned to the unique row identifier and then use the loop iterator "i" as a way to distinguish the radio buttons for each row.

Here is the HTML:

<form id="createEdges" method="POST>
    <fieldset>
        <legend class="title">Modify the graph!</legend>
        <table id="createEdgesTable">
        </table>    
        <input type="button" class="btn btn-default" id="backToThirdForm" onclick="goBackToForm3()" value="Back"/>
    </fieldset>

And Here is the Javascript:

newNodes = [];
newNodes.push(0);
newNodes.push(1);

//get HTML Table to add rows in
var edgeTable = document.getElementById("createEdgesTable");
//Create a table row for each node
    for (var i in newNodes) {
        var row = edgeTable.insertRow();
        row.id = "node" + i;

        //Show name of the node
        var td = document.createElement('td');
        var text = document.createTextNode(newNodes[i]);
        td.appendChild(text);
        row.appendChild(td);

        //Choice for showing node
        var td2 = document.createElement('td');
        var radioButton1 = document.createElement('input');
        radioButton1.type = "radio";
        radioButton1.name = i;
        radioButton1.value = "showNode";
        td2.appendChild(radioButton1);
        row.appendChild(td2);

        //Choice for creating edge 
        var td3 = document.createElement('td');
        var radioButton2 = document.createElement('input');
        radioButton2.type = "radio";
        radioButton2.name = i;
        radioButton2.value = "createEdge";
        td3.appendChild(radioButton2);
        row.appendChild(td3);

        //Choice for deleting node 
        var td4 = document.createElement('td');
        var radioButton3 = document.createElement('input');
        radioButton3.type = "radio";
        radioButton3.name = i;
        radioButton3.value = "removeNode";
        td4.appendChild(radioButton3);
        row.appendChild(td4);   

        var rowID = row.id;


    }

$('#node0 input').on('change', function() {
    alert($('input[name=0]:checked', '#node0').val()); 
});

JSFiddle: https://jsfiddle.net/nxexrq9y/

Any example on how to make this work for each row? I'm relatively new to JQuery and have been stuck on this problem for quite some time now. Thank you for your time and help!

Upvotes: 1

Views: 817

Answers (1)

Sameer Azazi
Sameer Azazi

Reputation: 1497

Just change your script with following code.

$('tr[id^=node] input').on('change', function() {
    alert(this.value); 
});

Explanation: Scripts find any tr whose id starts with node. this covers all your dynamically generated TRs. Further selection narrows down to only input element in each TR, and registers change event for that element. On that change event your have already got that element so you can easily access its value there.

Here is Js Fiddle Link

Further if you want to know clicked radio falls in which node, you can check out this js fiddle.

$('tr[id^=node] input').on('change', function() {
    var row = $(this).parents('tr:first').get(0);
    alert('Node: '+ row.id+ ' value:' + this.value); 
});

Upvotes: 4

Related Questions