Estoy buscando usar AJAX para enviar múltiples formularios al enviar. Necesito obtener el valor de un campo oculto para usar en la llamada AJAX. Tengo el primer envío funcionando bien y devuelve la respuesta esperada.

ejemplo:

 <form name="add_to_cart-12345" action="add_product" method="post"> <input type="hidden" name="products_id" value="12345" /> <input class="quantity" id="product_quantity" min="1" name="cart_quantity" value="1" step="1" type="number"> <input type="submit" class="add-to-cart" value="Add to Cart" id="addProduct-12345" />

Este código puede repetirse de 1 a n veces con los valores 12345 cambiando y siendo únicos.

Mi JavaScript es:

 <script> $(function() { // begin document ready $('#addProduct').on('click', function(e) { e.preventDefault(); var cart_quantity = document.getElementById('product_quantity').value; var products_id = parseInt(document.getElementsByName('products_id').value); var form = $(this).closest('form'); // AJAX request $.ajax({ url: 'ajax_add_product.php', type: 'POST', dataType : "html", data: {cart_quantity, products_id}, success: function(response){ console.log(response) var TotalInCart = parseInt(document.getElementById('cartTotal').innerText); var cartQuantity = parseInt(document.getElementById('product_quantity').value); var headerTotal = cartQuantity + TotalInCart; $("#cartTotal").html(headerTotal); $("#cartProducts").html(response); $("#ShoppingCartModal").modal({show:true}); }, error: function(xhr, status, error) { alert(xhr.responseText); } }); }); $( document ).ajaxError(function() { $( ".log" ).text( "Triggered ajaxError handler." ); }); }); </script>

Lo que debo hacer es poder enviar cualquier formulario al hacer clic. Y empuje la identificación del producto, la cantidad del producto a la llamada AJAX.