I need to extract the product id value from a hidden HTML input in order to utilize it within a JavaScript function.
Below is the HTML code that displays products along with their attributes:
{% for item in items %}
<li class="first product has-post-thumbnail">
<a href="#">
<img src="{{asset('public/images/'~item.getImage())}}"
class="attachment-shop_catalog"
alt="The Zoomer Robot Dog Toy 1"/>
<h3>{{ item.getName() }} {{ item.id }}</h3>
<span class="price">
<span class="amount">{{item.getPrice() }}</span>
</span>
<input id='inpt".{{ item.id }}."' type="hidden" value="{{ item.id }}">
</a>
<a rel="nofollow" id="slim" class="button
add_to_cart_button product_type_simple"
onclick="addToCart()">Add to cart</a>
</li>
JavaScript Function for dynamically adding items to the shopping cart:
<script>
var addToCart = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var input = document.getElementById('inpt7').value;
var urlEdit = "{{ path('addToCart', {'id': "id"})}";
urlEdit = urlEdit.replace("id", input);
$.ajax({
method: 'POST',
url: urlEdit,
ifModified: true,
success: function() {
console.log("Item added successfully");
alert("Item added to cart");
}
});
setTimeout(checkRequest, 5000);
}
};
})();
</script>