<...">
Geek Answers Handbook

Find parent and closest element using jQuery

I have a simple form like

<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 lines with the same as above.

I need it when the user enters qty or price total string that needs to be updated.

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 undefined

Or is there an easier way to do this? Please check 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

+6
source share
5 answers

first, think about how to create your own 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>

Besides. While 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: best approach, given empty fields correctly

+9
source

Just change parent() to parents() :

Demo:

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

Quoting 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 moves only one level up the DOM tree.

+4
source

I'm not sure that you can change the HTML code, but if you might think that you better give your input a class 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 the class selector 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.

+3
source 
 $('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 a lot of checks.

+3
source

.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, do not filter at all. Just get the parent element 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(); });
+2
source

More articles:


All Articles