Add values to input fields in the same row

Question

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.

$(This) wont work inside the ajax function therefore i have defined var _this = $this earlier so that i can use it inside the ajax function — Saad Bashir
– Saad Bashir, Commented Dec 11, 2012 at 6:17
Can you specify the call where you are using this jquery code? There are some confusion in determining what $(_this) actually means. — Karan Punamiya
– Karan Punamiya, Commented Dec 11, 2012 at 6:20
Ok well i am using $("#icode").live("focusout",function() { }); does that help? — Saad Bashir
– Saad Bashir, Commented Dec 11, 2012 at 6:21

Karan Punamiya · Accepted Answer · 2012-12-11 06:28:04Z

2

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.

answered Dec 11, 2012 at 6:28

Karan Punamiya

8,9331 gold badge28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karan Punamiya Over a year ago

Edited the answer. did not consider td tag before.

Saad Bashir Over a year ago

I have posted link to jsfiddle.net for your reference

3dgoo · Accepted Answer · 2012-12-11 06:36:49Z

0

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

answered Dec 11, 2012 at 6:36

3dgoo

15.8k6 gold badges49 silver badges59 bronze badges

3 Comments

Saad Bashir Over a year ago

I am starting to believe it could have something to do with the way I am adding rows. i tried doing the same with id and it worked when I do it the way you have illustrated. But when i dynamically add rows it doesn't work. Can you please look at the following link to see what I mean jsfiddle.net/nA7RL

3dgoo Over a year ago

Well the problem you are having in your fiddle is one character. If you call .parents('tr') instead of .parent('tr') then your function will work: jsfiddle.net/nA7RL/1. However there are several other problems in your code, such as exit; throws and error and should not be there, your tag attributes should all have "" quotes around the values, you should not be repeating IDs but use classes instead, etc.

3dgoo Over a year ago

@SaadBashir - Here is your code cleaned up and fixed: jsfiddle.net/nA7RL/2. Please keep in mind the points I made. This is not just about getting your code to work, it's about getting your code to work properly.

Collectives™ on Stack Overflow

Add values to input fields in the same row

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related