CODEWITHSUNDEEP
jqueryajax
Saad Bashir
Saad Bashir

Reputation: 4519

Add values to input fields in the same row

I have a table which have multiple rows with input fields having same names

<tr>
    <td>
        <input type=text name=icode[] id=icode>
    </td>
    <td>
        <input type=text name=description[] id=description>
    </td>
    <td>
        <input type=text name=rprice[] id=rprice>
    </td>
    <td>
        <input type=text name=discount[] id=discount>
    </td>
    <td>
        <input type=text name=fprice[] id=fprice>
    </td>
</tr>

Now using on focusout function I want to populate the value of description and rprice from the database. But I am unable to do it for the same row. While browsing around I found this piece of code 

 $(_this).parents('tr').find('#description').val(obj.description);

but it updates for all the rows and the specific row.

So basically when i type 1 in icode on row 2, I want description and rprice of row 2 to be updated only not all rows.

I have posted a sample code for reference: http://jsfiddle.net/nA7RL/

Thanks in advance.

Upvotes: 0

Views: 975

Answers (2)

3dgoo
3dgoo

Reputation: 15794

The ID of an element must be unique. If you have duplicate IDs they will not work. Use class instead.

HTML

<table>
    <tr>
        <td>
            <input type="text" name="icode[]" class="icode">
        </td>
        <td>
            <input type="text" name="description[]" class="description">
        </td>
        <td>
            <input type="text" name="rprice[]" class="rprice">
        </td>
        <td>
            <input type="text" name="discount[]" class="discount">
        </td>
        <td>
            <input type="text" name="fprice[]" class="fprice">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="icode[]" class="icode">
        </td>
        <td>
            <input type="text" name="description[]" class="description">
        </td>
        <td>
            <input type="text" name="rprice[]" class="rprice">
        </td>
        <td>
            <input type="text" name="discount[]" class="discount">
        </td>
        <td>
            <input type="text" name="fprice[]" class="fprice">
        </td>
    </tr>
</table>
​

Javascript

$('.icode').on('change', function() {
    $(this).parents('tr').find('.description').val($(this).val());
});

Demo

Upvotes: 0

Karan Punamiya
Karan Punamiya

Reputation: 8863

Use parent instead of parents:

$(_this).parent().parent('tr').find('#description').val(obj.description);

from jquery: http://api.jquery.com/parents/

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

In your case, the parents method is going to the higher level tr, and from there, the find method is locating all the existing description fields.

Upvotes: 2

Related Questions