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...

im a little confused by your syntax/structure haha, is what you're trying to do is get all the input values of a given row when you click the button in that row? could we see the html structure (no the one you built in js) — indubitablee
– indubitablee, Commented Mar 30, 2016 at 19:43
I updated the code. I hope it will be clear now. I'm creating one table and returning it. Then the user changes the values of the inputs. Once the user clicks on the update button, I want to get the values of the three inputs in this table and work with them at my backend — renno
– renno, Commented Mar 30, 2016 at 19:51

Ryan Dantzler · Accepted Answer · 2016-03-30 19:41:15Z

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();

edited Mar 30, 2016 at 19:41

answered Mar 30, 2016 at 19:38

Ryan Dantzler

1,1441 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Over a year ago

That won't work since it's looking for the value as opposed to the name

Ryan Dantzler Over a year ago

Thanks, I meant to put name instead of value

renno Over a year ago

Same thing as @MikeSprague 's comment

kocytean · Accepted Answer · 2016-03-30 20:12:24Z

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.

Michael · Accepted Answer · 2016-03-30 20:14:18Z

1

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

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

Edited after more detail (see comments below)

edited Mar 30, 2016 at 20:14

answered Mar 30, 2016 at 19:39

Michael

1711 gold badge1 silver badge7 bronze badges

6 Comments

renno Over a year ago

This yields to the same problem I had with document.getElementsByName. It returns the value of the first table only

DBS Over a year ago

@rennomarcus If this is working, but you need multiple feilds, just use each() e.g. $( 'input[name="role"]' ).each(function(){ alert($(this).val()) })

Michael Over a year ago

Ah, ok. Is there any reason you can't give the inputs an id , maybe with the name and the index of the group of inputs (table 1 has role1, table 2 has role2, etc) and use those as the selectors?

renno Over a year ago

Yeah, I wasn't using ID's, because I wasn't sure where to put. But you are right... I can put the userid as the table's id and then do a search. I'll try this approach and update with my results

Michael Over a year ago

That should be perfect, then you can change the above to $( '#tableId input[name="role"]' ) etc

|

Collectives™ on Stack Overflow

Find input field using jQuery

3 Answers 3

3 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related