Question

I looped my html, and wish to get specific field value when the user clicked the button.
I am having headahce to retrieve the correct value please help me out.

<div id="tabs1">
<table>
{foreach from=$this->products item=p}               
<tr>
<td><div class="tabs-product">
<div>
<input type='hidden' id='item' name='item' value='{$p.name}'/>
<input type='hidden' id='price' name='price' value='{$p.price}'/>
<button class="shareButton" onclick='post(); return false;'>Share</button>
</div></td></tr>
{/foreach}
</table></div>

<script>
 function post() {
    var item =  $(this).parent("tabs-product").attr("input");//this cause undefined
    var price = $('#price').val(); //this method only get first value
    alert(item + price);
}
</script>

Answer 1

var $product = $(this).closest('.tabs-product');
var item = $product.find('input[name="item"]').val();
var price = $product.find('input[name="price"]').val();

• input is an element, not an attribute.
• You can’t use absolute IDs like in your $('#price'), since you have several elements with identical IDs (printed by a loop) – it is both illegal by spec (but permitted by lax browsers), and useless
• Using input[name="..."] selector, you can pinpoint which input element within the product you actually need.
• In this case, parent and closest work equally well, but I like closest better for the flexibility in these kinds of cases, if you change your mind about the structure and decide to insert an extra element, for layout or whatever other reason. EDIT: As noted by TJ in comments, I missed the <div>, which just drives this point home.