JQuery - Find textbox values within a table throug

Question

I have one HTML Table... This HTML table's first row is a static, when they click one (+) button means, the rows will added dynamically, the user want to delete one row means, he click one(-) button means current row is delete.

Each row have 4 text-boxes. My Jquery code is give below..

var FirstName;
var LastName;
var Email;
var PhoneNumber;
 $("#tableId tr").find('fieldset').each(function (i) { 
                    FirstName =FirstName +','+ $("#txtFirstName" + (i + 1) + "").val();
                    LastName =LastName +','+ $("#txtLastName" + (i + 1) + "").val();
                    Email =Email +','+ $("#txtEmail" + (i + 1) + "").val();
                    PhoneNumber = PhoneNumber+','+ $("#txtPhoneNumber" + (i + 1) + "").val();
                });

I set the text-boxes id's are dynamically,its working fine, but when the user delete one row means i cant get the text-boxes value based on Id.

How do i get the text-boxes values ?

Answer 1

The ideal solution to this is to allow you to get the rows by id even if a row is deleted. Do this by updating the id of the rows every time a row gets deleted.

Answer 2

You could use a selector like:

     $("input[type='input']")

Or apply a specific class to the textboxes which one you want and search for that.

Answer 3

assuming that your table somewhat looks like this:

​<table>
    <tr>
        <td>
            <input type="text" class="firstName" value="foo1">
            <input type="text" class="lastName" value="ba1r">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="firstName" value="foo2">
            <input type="text" class="lastName" value="bar2">
        </td>
    </tr>
</table​​​​​​​​​​​​​​​​​​​​​​​​​​>​​​​

here's a snippet that might work (may need to be modified to your needs)

$(function() {

    //storage        
    var data = {
        firstName : [], lastName : []
    }

    //loop through the tr's
    $('table tr').each(function() {

        //look for the fields firstName and lastName in the tr
        //get their values and push into storage        
        data.firstName.push($('.firstName', this).val());
        data.lastName.push($('.lastName', this).val());
    });

    //view the data in the console
    console.log(data);

    //if you prefer the comma separated data
    var firstName = data.firstName.join(',');
    var lastName = data.lastName.join(',');
});​

Answer 4

$(this) inside the loop will give you a handle on the current element

Answer 5

I'm using the index to access the four text fields. Also added the $fieldset as a context.

$("#tableId").find('tr fieldset').each(function (i) { 
    var $fieldset = $(this);
    FirstName =FirstName +','+ $('input:text:eq(0)', $fieldset).val();
    LastName =LastName +','+ $('input:text:eq(1)', $fieldset).val();
    Email =Email +','+ $('input:text:eq(2)', $fieldset).val();
    PhoneNumber = PhoneNumber+','+ $('input:text:eq(3)', $fieldset).val();
});

Answer 6

try to get value using like this

  $(this).find("input[id^='txtFirstName']").val()