Find input field using jQuery

Question

I've been trying to find three inputs (type=text) which were added dynamically using jQuery. I've tried to use .closest(), .parents(), .find(), and .children(), but I failed.

I also tried with document.getElementsByName, but it does not return the correct value if I create more than one group of inputs (which can be added dynamically, as I said before).

My code is the following:

function update(username, row) {
    affiliation_val = $(document.getElementsByName('affiliation')).val(),
    comments_val = $(document.getElementsByName('comments')).val(),
    role_val = $(document.getElementsByName('role')).val();
//the search above does not work when I add multiple inputs… it returns only the first three inputs 
    console.log( $(row).closest(“input”) ); //one of my attempts... I also did using a combination of parents("tbody") and  children("input"), for example... and many others  
}


function format(d) {
        var message1 = '<table cellpadding="8" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td class="text-right"><b>User ID:</b></td>'+
            '<td class="text-left"> &nbsp; '+username+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td class="text-right"><b>Password last set:</b></td>'+
            '<td class="text-left"> &nbsp; '+d.pwd_last_set+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td class="text-right"><b>Uid number:</b></td>'+
            '<td class="text-left"> &nbsp; '+d.uid+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td class="text-right"><b>Email:</b></td>'+
            '<td class="text-left"> &nbsp; '+d.email+'</td>'+
        '</tr>'+
        split_projects(d.projects_name, d.projects_role),
        message2 = '<tr>'+
            '<td class="text-right"><b>Affiliation:</b></td>'+
            '<td class="text-left"><input type="text" name="affiliation" value="'+d.affiliation+'" '+readonly+' /></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="text-right"><b>Comments:</b></td>'+
            '<td class="text-left"> <input type="text" name="comments" value="'+d.comment+'" '+readonly+' /></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="text-right"><b>Role:</b></td>'+
            '<td class="text-left"><input type="text" name="role" value="'+d.role+'" '+readonly+' /></td>'+
        '</tr>',
        message3 = show_inconsistency(inconsistent)+
        show_miss_uid(miss_uid)+
        '<tr>'+
            '<td>&nbsp; </td>' +
        '<td>'+
              '<button type="button" class="btn btn-default" onclick="sendMail(\'' +username+ '\'); return false">' +
                '<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Request change of permission' +
              '</button> <br/><br/> ' +
            '</td>' +
        '</tr>' +
    '</table>',

        button = '<tr><td>&nbsp;</td><td><button class="btn btn-default" onclick="update(\''+username+'\', this)">Update</button</td></tr>';

    return message1+message2+button+message3;
}

Any help would be highly appreciate...

Answer 1

The following should work as your selector, change "role" accordiingly:

$( '#tableId input[name="role"]' ).val();

Edited after more detail (see comments below)

Answer 2

As also suggested by @DBS, use .each().

$('[name="role"]').each(function(index, element){
    console.log( $(element).val() );
});

This will loop through every element currently on the page with the name "role" and print their value to the console.

If you only needed to find the elements (to do something else with them, as you suggest in your question), then you can use element inside the .each() loop to do stuff with each element.

Here's another idea. If you know the parent of the elements (since it sounds like you have more than one of each of these elements on the page), and are interested in a particulare one, try this:

$('#myParentID [name="role"]');

This will select only the role input inside #myParentID.

Answer 3

Use the jQuery( "[attribute='value']" ) selector

affiliation_val = $( "input[name='affiliation']" ).val();
comments_val = $( "input[name='comments']" ).val();
role_val = $( "input[name='role']" ).val();