Question

I am using jquery 1.6.4 and I have a table. Initially in the table, a user is presented by only one row and a few columns. I, then, let users add as many rows as they would like using by doing this

$('.add').live('click', function(e){

        e.preventDefault();
        var $parentRow = $(this).parents('tr');
        $parentRow.clone().insertAfter($parentRow);
        $parentRow.next().find('input').val('');
        $(this).replaceWith('<a href="#" class="delete">-</a>');
    });

I also let them delete the rows on fly doing this

$('.delete').live('click', function(e){
        alert("removing");
        e.preventDefault();
        $(this).parents('tr').remove();
    });

However now I want the values that they are entering in these columns to be collected. I am not sure how to collect those values when they hit submit button as in my view source all I see is this

<tr>
<td class="actions"><a href="#" class="add">+</a></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><textarea rows="1"></textarea></td>
</tr>

In the page source it shows only one row where as in my view I definitely see three rows added. Not sure what am I missing and how to get the values

Answer 1

You don’t have ids so it will be difficult to tell what you are actually collecting, but to get the values of the inputs, both static and dynamic, you can use this:

//submit code
$('input[type=submit]').click(function(){
    $('table input').each(function(index,item){
        //for testing you could just output to a div
        //$('#output').append($(this).val());
    });

});