CODEWITHSUNDEEP
javascriptjqueryhtml
Spark
Spark

Reputation: 1037

Get input values of dynamically created input elements

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.

Upvotes: 0

Views: 1676

Answers (3)

RafH
RafH

Reputation: 4544

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/

Upvotes: 1

Peter van der Wal
Peter van der Wal

Reputation: 11786

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/

Upvotes: 0

srquinn
srquinn

Reputation: 10481

$('#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

Upvotes: 0

Related Questions