I have a simple form as

<tr>
    <td> <input type="text" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="text" name="price[]" placeholder="price"/> </td>
    <td> <input type="text" name="total[]" placeholder="Total"/> </td>
</tr>

we can have multiple row with the same as above.

What I need is when the User inputs the qty or price the row total needs to update.

What I tried

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent('tr').find('input[name=\'price[]\']').val();  
});

price is undefined

Or is there an easier way to do it? Please check the Fiddle

UPDATE :

.parent(..) selects the direct parent of each of the elements in the current set of elements. The first argument filters this set. The direct parent of your input element is the td element, not the tr element.

Updated Fiddle

I have a simple form as

<tr>
    <td> <input type="text" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="text" name="price[]" placeholder="price"/> </td>
    <td> <input type="text" name="total[]" placeholder="Total"/> </td>
</tr>

we can have multiple row with the same as above.

What I need is when the User inputs the qty or price the row total needs to update.

What I tried

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent('tr').find('input[name=\'price[]\']').val();  
});

price is undefined

Or is there an easier way to do it? Please check the Fiddle

UPDATE :

.parent(..) selects the direct parent of each of the elements in the current set of elements. The first argument filters this set. The direct parent of your input element is the td element, not the tr element.

Updated Fiddle

• javascript
• jquery

• 2 .parent(..) selects the parent of each element in the set, filtered by the selector. The direct parent is td, not tr. – Sumurai8 Commented Nov 14, 2015 at 11:02
• $(this).parent('td').parent('tr') - works ! – epynic Commented Nov 14, 2015 at 11:05
• Or just .parent().parent(); it's not that you have more than 1 element in that set... – Sumurai8 Commented Nov 14, 2015 at 11:07

5 Answers 5

first of, think about making your html as such:

<tr>
    <td> <input type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="number" name="price[]" placeholder="price"/> </td>
    <td> <input type="number" name="total[]" placeholder="Total"/> </td>
</tr>

Also. As far a javascript goes:

jQuery(document).on("change ,  keyup" , "input[name='qty[]'] , input[name='price[]']" ,function(){
     var parent_element = jQuery(this).closest("tr");
     var qty = jQuery(parent_element).find("input[name='qty[]']").val();
     var price = jQuery(parent_element).find("input[name='price[]']").val();
     if( qty.trim() != "" && price.trim() != "")
      {
        jQuery(parent_element).find("input[name='total[]']").val( parseFloat(qty) *parseFloat(price) );
      }
      else
      {
        jQuery(parent_element).find("input[name='total[]']").val("");
      }
});

EDIT :Better approach, properly taking into account empty fields

Just change parent() to parents():

Demo:

https://jsfiddle.net/yqe4kwbz/9/

Citing from https://api.jquery.com/parents/ sbout parents():

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).closest("tr").find('input[name=\'price[]\']').val();
});

Although this code works, you have to deal with lots of validations.

I"m not sure if you're able to change in the HTML code,but if you can i think it will be better to give your inputs a classs like following example :

<tr>
    <td> <input class='calculate' type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input class='calculate' type="number" name="price[]" placeholder="price"/> </td>
    <td> <input class='total' type="number" name="total[]" placeholder="Total"/> </td>
</tr>

And use class selectors to get your values :

$('.calculate']').on('change keyup', function(){
    var qty   = parseFloat( $(this).parents('tr').find('.qte').val() );
    var price = parseFloat( $(this).parents('tr').find('.price').val() );  

    $(this).parents('tr').find('.total').val( qty * price );  
});

Hope this helps.

.parent(..) selects the direct parent of each of the elements in the current set of elements. The first argument filters this set. The direct parent of your input element is the td element, not the tr element.

Since you only have 1 element in your set, don't filter at all. Just get the parent twice, so you select the tr element.

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val();  
});