Errol Farro
asked on
Retrieve values of an HTML form using JQUERY
I have the below code.
How do I retrieve the value of class snipcart-details after the "add to cart" button has been clicked ?.
I keep getting the value of the first product even if I click on the second or third product.
How do I retrieve the value of class snipcart-details after the "add to cart" button has been clicked ?.
I keep getting the value of the first product even if I click on the second or third product.
<script>
$(document).ready(function() {
$(".button").click(function() {
alert("Value: " + $("#item_name").val());
});
});
</script>
<div class="col-md-3 w3ls_w3l_banner_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/58.png" alt=" " class="img-responsive" /></a>
<p>junior pet food (90 gm)</p>
<h4>$5.00 <span>$6.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="input" id="cmd" value="_cart" />
<input type="input" id="add" value="1" />
<input type="input" id="business" value=" " />
<input type="input" id="item_name" value="junior pet food" />
<input type="input" id="amount" value="5.00" />
<input type="input" id="discount_amount" value="1.00" />
<input type="input" id="currency_code" value="USD" />
<input type="input" id="return" value=" " />
<input type="input" id="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 w3ls_w3l_banner_left w3ls_w3l_banner_left_asd">
<div class="hover14 column">
<div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/4.png" alt=" " class="img-responsive" /></a>
<p>dogs food - junior (4 Kg)</p>
<h4>$9.00 <span>$11.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="input" id="cmd" value="_cart" />
<input type="input" id="add" value="1" />
<input type="input" id="business" value=" " />
<input type="input" id="item_name" value="dogs food - junior" />
<input type="input" id="amount" value="9.00" />
<input type="input" id="discount_amount" value="1.00" />
<input type="input" id="currency_code" value="USD" />
<input type="input" id="return" value=" " />
<input type="input" id="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="col-md-3 w3ls_w3l_banner_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive" />
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href="single.html"><img src="images/59.png" alt=" " class="img-responsive" /></a>
<p>gravy food for dogs (20 kg)</p>
<h4>$15.00 <span>$18.00</span></h4>
</div>
<div class="snipcart-details">
<form action="#" method="post">
<fieldset>
<input type="input" id="cmd" value="_cart" />
<input type="input" id="add" value="1" />
<input type="input" id="business" value=" " />
<input type="input" id="item_name" value="gravy food for dogs" />
<input type="input" id="amount" value="15.00" />
<input type="input" id="discount_amount" value="1.00" />
<input type="input" id="currency_code" value="USD" />
<input type="input" id="return" value=" " />
<input type="input" id="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
anyway here how to do it : https://jsfiddle.net/ypwezcar/2/
Open in new window