Get input values of dynamically created input elements

Question

I'm relatively new to web development, what i'm trying to achieve is an array of all the input values of the current row for each row found, for example: test1, true

While i'm able to get the dynamically created input values, i end up with a bunch of blanks, possibly headers? I'm also not sure my method of obtaining the values is the best solution either. Here is what i have so far: http://jsfiddle.net/gcL9H/2/

<table id='categoriesTable' border='1'>
<tr>
    <th>Category</th>
    <th>X</th>
</tr>
<tr id='data'>
    <td><input value='test1' type='text' /></td>
    <td><input type='checkbox' /></td>
</tr>
</table>
<button id="addRow">Add</button>
<button id="saveCategories">Results</button>

$('#addRow').click(function()
{
    $('#categoriesTable').append("<tr></tr><tr></tr><td><input type='text'/></td><td><input type='checkbox'/></td>");
});

$('#saveCategories').click(function()
{
    $("#categoriesTable tr").each(function()
    {
        var row = [];
        $(this).find('td').each(function()
        {
            var type = $(this).find('input').attr('type');
            if(type == "text")
                row.push($(this).find('input').val());
            else
            if(type == "checkbox")
                row.push($(this).find('input').is(":checked"));
        })
        alert(row);
    })
});

Thanks in advance.

What are the extra <tr> tags in your addRow click handler? — srquinn
– srquinn, Commented Dec 9, 2013 at 21:06
You've tagged this "php" but uses none, do you want a solution in PHP or jQuery? As this can be accomplished in both. — Jeppe
– Jeppe, Commented Dec 9, 2013 at 21:06
Thanks Christopher if you post it as an answer i'll mark accept it. — Spark
– Spark, Commented Dec 9, 2013 at 21:18

RafH · Accepted Answer · 2013-12-09 21:20:40Z

1

As said in other answers, you add a markup issue with the <tr> tag

$('#addRow').click(function(){
    $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
});

Collect the text / checkbox values in an array of objects :

$('#saveCategories').click(function(){
     var rows = [];
    // iterates each TR, skip header one
    $("#categoriesTable tr").each(function()   {
        if ( $('td',this).length>0) { // exclude header row
            var $td = $('td',this);
            // push an object of the row with label / checked properties
            rows.push({                
                label: $td.eq(0).find('input').val(),
                checked:  $td.eq(1).find('input').is(':checked')
            });
        }
    });

    // display results
    $("#results").empty();
    $(rows).each(function(index,element) {
        $("#results").append('row:' + index + ', label:' + element.label + ', checked:' + element.checked + '<br/>'); 
    });
});

I added a <div id="results"></div> to diplay collected values.

Fiddle : http://jsfiddle.net/gcL9H/13/

answered Dec 9, 2013 at 21:20

RafH

4,5442 gold badges25 silver badges23 bronze badges

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

1 Comment

Spark Over a year ago

Accepted this for the extra help in handling results, thanks again.

srquinn · Accepted Answer · 2013-12-09 21:10:34Z

0

$('#addRow').click(function() {
  $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
});

Simply kill the extra <tr> tags and wrap the entire template string with <tr> and you should be good to go. You were pulling in extra tags each time you added.

See this fiddle

answered Dec 9, 2013 at 21:10

srquinn

10.5k2 gold badges50 silver badges54 bronze badges

Comments

Peter van der Wal · Accepted Answer · 2013-12-09 21:10:41Z

0

There were two issues:

Extra row's are being added:

$('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
// Remove all the extra <tr></tr>'s and just have one <tr> at the start, 
// one </tr> at the end

Add a class to your first row so you could ignore this one

<tr class="header">
    <th>Category</th>
    <th>X</th>
</tr>

and have your selection as follows:

$("#categoriesTable tr:not(.header)").each(function()

Updated fiddle: http://jsfiddle.net/gcL9H/3/

answered Dec 9, 2013 at 21:10

Peter van der Wal

12k2 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Get input values of dynamically created input elements

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related