Processing forms with jQuery - php

Question

I have some PHP code that generates out a bunch of store items from my database. Each item has a quantity text box and an add to cart submit button and a hidden value with the special ID.
Here is basically how my form is generated:
<form class='form-inline' id='addtocart_form' action='
additem.php?iid=$SaleItem_Id&u=".$_SESSION['id']." ' method='post' role='form'>
<div class='form-group'>
<div class='input-group'>
<input type='text' class='form-control' style= 'float: left; width:50%;' id='quantity'
name='quantity' value='0'></input>
<button type='submit' name='add_to_cart' id='add' class='btn btn-success'>Add to
Cart</button>
</div>
<input type='text' name='$SaleItem_Id' style='display: none;' id='$SaleItem_Id'
value='$SaleItem_Id'>
</form>
My cart works perfectly, except it refreshes and puts you back up to the top of the screen. So then I decided to implement jQuery. All of these generated forms have the same id: addtocart_form.
$(function() {
$("#addtocart_form").on('submit' , function(e) {
e.preventDefault();
var thisForm = $(this);
var quantity = $("#quantity").val();
var dataString = $("#addtocart_form").serialize();
$.ajax({
type: "POST",
url: thisForm.attr('action'),
data: dataString,
});
$("#quantity").val("0");
return false;
});
});
The first item that is displayed on the screen works perfectly. It adds the item to the cart without refreshing the screen.
All of the other forms on the page are being submitted without the jQuery. They add the item, but redirect to the URL of my action.
How can I fix this without rewriting my entire store? I assume it has something with which form is being told to submit.

Answer 1

The id attribute should be unique in same document so try to replace the id addtocart_form by class, and all the other id's by classes to avoid duplicated id.
HTML :
<form class='form-inline addtocart_form' action=...
JS :
$("body").on('submit', '.addtocart_form', function(e) {
e.preventDefault();
var quantity = $(this).find(".quantity").val();
var dataString = $(this).serialize();
var action = $(this).attr('action')
$.ajax({
type: "POST",
url: action,
data: dataString,
});
$(this).find(".quantity").val("0");
return false;
});
Hope this helps.

Answer 2

You should not have more than one element with the same id on a page. If all of your forms use the same id, that's a problem.
Since you are using JQuery with AJAX, there's really no need to use a form at all. Just use a regular button (type="button") and tie a click event to it. Find the parent div of the button and get the values of the inputs within that div.
If your markup looks like this:
<div class='form-group'>
<input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
<button type='button' class='btn btn-success add'>Add to Cart</button>
<input type='text' style='display: none;' class='saleItem_Id'>
</div>
<div class='form-group'>
<input type='text' class='form-control quantity' style='float: left; width:50%;' value='0'>
<button type='button' class='btn btn-success add'>Add to Cart</button>
<input type='text' style='display: none;' class='saleItem_Id'>
</div>
You can iterate over the inputs within the div like so:
$(".add").on('click', function() {
var parentDiv = $(this).closest("div");
//in this example, you only have one element, but this is how you would iterate over multiple elements
parentDiv.children('input').each(function() {
console.log($(this).prop('class'));
console.log($(this).val());
});
//do your ajax stuff
});
JS Fiddle demo