Get value of form element inserted with DOM manipulation, using jQuery

Question

I am looking for a solution to get values of input checkboxes, which are inserted using .html() inside a form, using jQuery.

I am not looking for $('#form').serialize(); solution, which doesn't work in this case.

Here is how checkboxes be created

$.each(ds.result, function(k,user) {
    rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\''+user['id']+'\',\''+user['fullname']+'\',\''+user['gender']+'\',\''+user['birthyear']+'\',\''+user['location']+'\',\''+user['email']+'\',\''+user['phone']+'\');">Edit</button></td><td>'+user['fullname']+'</td><td>'+user['gender']+'</td><td>'+user['birthyear']+'</td><td>'+user['location']+'</td><td>'+user['xtimelogin']+'</td></tr>';
});
$('#filter-users-tbody').html(rows);

And my form

<form method="post" id="form-select-users">
<tbody id="filter-users-tbody"></tbody>
</form>

And what I tried so far

function getusers() {
    alert('here');
    console.log($("#form-select-users").serialize());
    console.log($("#form-select-users > input").val());
    // $("#form-select-users").submit();
};

None of them work

Maybe I miss some small thing, but it took me much time anyways. Thanks for the help.

Answer 1

The HTML is invalid, you can't have a tbody as a direct child of a form . So the checkboxes probably aren't in the form by the time the browser has sorted it out. Move the form to be around the entire table.

Example of the problem:

 var ds = { result: [ {id: 1, fullname: "One"}, {id: 2, fullname: "Two"}, {id: 3, fullname: "Three"} ] }; var rows = ""; $.each(ds.result, function(k,user) { rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\\''+user['id']+'\\',\\''+user['fullname']+'\\',\\''+user['gender']+'\\',\\''+user['birthyear']+'\\',\\''+user['location']+'\\',\\''+user['email']+'\\',\\''+user['phone']+'\\');">Edit</button></td><td>'+user['fullname']+'</td><td>...</td></tr>'; }); $('#filter-users-tbody').html(rows); $("input[type=button]").on("click", getusers); function getusers() { console.log($("#form-select-users").serialize()); } 

 <table> <form method="post" id="form-select-users"> <tbody id="filter-users-tbody"></tbody> </form> </table> <input type="button" value="Click me after ticking some boxes"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Example of the solution:

 var ds = { result: [ {id: 1, fullname: "One"}, {id: 2, fullname: "Two"}, {id: 3, fullname: "Three"} ] }; var rows = ""; $.each(ds.result, function(k,user) { rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\\''+user['id']+'\\',\\''+user['fullname']+'\\',\\''+user['gender']+'\\',\\''+user['birthyear']+'\\',\\''+user['location']+'\\',\\''+user['email']+'\\',\\''+user['phone']+'\\');">Edit</button></td><td>'+user['fullname']+'</td><td>...</td></tr>'; }); $('#filter-users-tbody').html(rows); $("input[type=button]").on("click", getusers); function getusers() { console.log($("#form-select-users").serialize()); // $("#form-select-users").submit(); } 

 <form method="post" id="form-select-users"> <table> <tbody id="filter-users-tbody"></tbody> </table> </form> <input type="button" value="Click me after ticking some boxes"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

There are 2 issues in your code.

1: When you add tbody tag without a table tag, tbody tag is not created.

2: Remove > from the following statement console.log($("#form-select-users input").val()); . > looks for immediate child and `input is not an immediate child.