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.
        <script>

			$(document).ready(function() {

			    $(".button").click(function() {
					alert("Value: " + $("#item_name").val());
			    });
			});
			

        </script>  

Open in new window




                              
<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>

Open in new window

Errol FarroAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Julian HansenConnect With a Mentor Commented:
Your problem is that you have multiple forms with elements with the same ID.

This is not legal - id's must be unique. When you do a select on ID number multiple are going to be found but because ID's must be unique it will take the the first one. Consider this code
<html>
<body>
<div id="fred">fred 1</div>
<div id="fred">fred 2</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('#fred').each(function(i,e) {
    alert(e.innerHTML);
  });
});
</script>
</body>
</html>

Open in new window

This will alert "Fred 1"
Now consider this code
<html>
<body>
<div class="fred">fred 1</div>
<div class="fred">fred 2</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('.fred').each(function(i,e) {
    alert(e.innerHTML);
  });
});
</script>
</body>
</html>

Open in new window

This will alert Fred 1 and then Fred 2 - because classes can be duplicated - when you select on a class you get all matching elements.

While the above solution will work it is essentially just putting a plaster over the problem.

Here is how I would do your page.
1. Change your id="" to name="" for each form - this can be done with a search and replace
search: input" id=" and replace with input" name="

2. Add this jQuery
<script>
$(function() {
  $('form').submit(function(e) {
    // Prevent default form submit
    e.preventDefault();
	// get all the data for the input controls on the clicked form
    var data = $(this).serialize();
	// show them in the console
    console.log(data);
  });
});
</script>

Open in new window


Working sample here
0
 
leakim971PluritechnicianCommented:
you should have a unique ID on a page : https://www.w3.org/TR/WCAG-TECHS/H93.html
anyway here how to do it : https://jsfiddle.net/ypwezcar/2/

			$(document).ready(function() {
			    $(".button").click(function(evt) {
			               evt.preventDefault(); // this is to stop posting the form, remove it if needed
			                var $myForm = $(this).closest("form");
			                var $myItem = $("input[id='item_name']", $myForm);
					alert("Value: " + $myItem.val());
			    });
			});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.