JQuery - Find textbox values in table through $ .each loop

Question

JQuery - Find textbox values in table through $ .each loop

I have one HTML table ... This first row of HTML table is static, when they click one (+) button, rows are added dynamically, user wants to delete one row, he click one (-) means the current row is deleted.

Each line contains 4 text boxes. My JQuery code is 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 am setting the id of the textboxes dynamically, its working, but when the user deletes one line, I cannot get the value of the textboxes based on the Id.

How do I get the values of text boxes?

+3

jquery textbox

Manikandan sethuraju 22 Mar 12 at 8:59

source to share

6 answers

Assuming your table looks something 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 (it might need to be modified to suit 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(',');
});

+3

Joseph 22 Mar 12 at 9:12 am

source to share

try to get the value using this

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

+1

Jigs 22 Mar '12 at 9:11

source to share

$(this)

inside the loop will give you a handle to the current element

0

Manatok 22 Mar 12 at 9:03

source to share

You can use a selector like:

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

Or apply specific class

to the textboxes

one you want and search.

0

JustinN 22 Mar 12 at 9:03

source to share

The ideal solution for this is to let you get rows by id, even if the row is deleted. Do this by updating the row id every time a row is deleted.

0

Th0rndike 22 Mar 12 at 9:04

source to share

TJ. · Accepted Answer · 2012-03-22T09:10:11+0000

I am using an index to access four text fields. Also added $ fieldset parameter as 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();
});

JQuery - Find textbox values ​​in table through $ .each loop

More articles:

JQuery - Find textbox values in table through $ .each loop