CODEWITHSUNDEEP
javascriptjqueryhtml
Оzgur
Оzgur

Reputation: 432

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

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.

Upvotes: 1

Views: 295

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074355

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>

Upvotes: 3

Harshit Jain
Harshit Jain

Reputation: 492

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.

Upvotes: 1

Related Questions