CODEWITHSUNDEEP
javascriptjquery
Mahantesh
Mahantesh

Reputation: 357

Get id or class name of particular input(child) elements of a div in jquery

Using bellow code i am dynamically created the table. In this table the 4th td have dynamic data with div what i want is When user select textbox want to remove child div then append textbox or if he select fileupload then append upload field in that td tag only

//some lines of table opening and header code comes here
$.each(data,function(key,value){
    MoreTag += '<tr><td style="width: 10px">'+value.Id+'</td>';
    MoreTag += '<td>'+value.installment_number+'</td>';
    MoreTag += '<td>'+value.instal_title+'</td>';

    //4th td element 
    MoreTag += '<td id="tabledata">'+        
                '<div id="fields'+value.installment_number+'">'+
                    '<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">&nbsp;Text Box</label>'+
                    '&nbsp;<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">&nbsp;File Upload</label>'+
                '</div></td>';
    MoreTag += '<td>'+value.instal_amount+'</td></tr>';
});
MoreTag += '</tbody>';
MoreTag += '</table>';
MoreTag += '</div>';
$('#listofstudloanschedules').append(MoreTag);

I am tring with this script

var childinput = '';
$(document).on('change',"#tabledata",function(){
    var name = $(this).children("div").prop("id");
    $("#" + name + " input").click(function(){
         childinput = $(this).attr("id");
         alert(childinput);
    });
});

By this i got perticular field id or class name.

problem But for every rows 4th td the first click was not alerting..

Upvotes: 2

Views: 3060

Answers (3)

Mahantesh
Mahantesh

Reputation: 357

This is the right solution as per my requirement.

$(document).on('change',"#tabledata",function(){
    var childinput=$(this).find("div input:checked").prop("id");
    alert(childinput);
});

Upvotes: 0

hasan
hasan

Reputation: 3502

You can get id of upload input by using jquery .on("click") event like following.

$("div#text_fields input").on('click',function(){
        var name=$(this).attr("id");
        console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="tabledata">
        <div id="text_fields">
            <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">Text Box</label>
            <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">Upload File</label>
        </div>
    </td>

Upvotes: 2

Minesh
Minesh

Reputation: 166

let me give you simple code snippet, but you have to modify value of input type radio button as per your requirement

$(document).ready(function() {
    $('input[type=radio]').change(function() {
		if (this.value == 'textbox') {
            alert("textbox");
        }
        else if (this.value == 'uploadfile') {
            alert("uploadfile");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<td id="tabledata">
        <div id="text_fields">
            <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox" value="textbox">Text Box</label>
            <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload" value="uploadfile">Upload File</label>
        </div>
    </td>

Upvotes: 2

Related Questions