Adding items to cart

#1

Sir here we convert the products from database into html elements and append them in our html element now when we click the button add to cart we are supposed to add the item in the cart database but all the items will have a button add to cart so how will i get to know that which item’s add to cart is clicked
Please tell a way i can access the item info whose add to cart button is clicked
I thought of using value attribute in button tag
Will that work??

#2

Can you elaborate your doubt. Do you want to display “Add to Cart” button only when the item is not added to cart?

#3

No I mean that after add to cart is pressed
Then we have to add that item in cart database for use it how will I know that which item is to be added coz every item will have same button of add to cart included on same class

#4

If you are still not able to get what my doubt is
Please give me your number and time when I can call you tomorrow to get the solution

#5

When you click the add item button, you can send the item id in the post request. Then, at the backend you can make an entry in cart table.

#6

Ok but how will we know that what is Id because

  1. All the buttons are of same class so cannot differentiate between then and
  2. Inside the html element how will we store the Id of item
#7

Create a form, with a hidden input, and the submit button.

#8

Ok but from where that input will get a value if its hidden because input is use to get data from user

#9

use <input type="hidden" value="27421"/>

#10

Ok and I can access this value like this
$(’.classname’).Val() right??

#11

Because all of them will be in same class and not id then if I do this command then all the hidden input will give the their value that is all input in the class so how to handle this??

#12

assign an id to this input, use that id to get the value

#13

And how to get that value

#14

using val() command of jquery or something else

#15

Untitled
Untitled1920×1080 163 KB

I thought that i will give the add to cart buttons id=product_id and will access the product_id using input tag that is the way you told in previous comments and for getting the id from input buttons i will traverse all the input elements using each function and so but this function is not working (including) the elements which are created in append() function
please tell the correct format

#16

https://github.com/Rahul172000/SHOPPING-SITE
this is git repos link if you want to check anything in code

#17

I think the best way would be to assign a class to “add to cart” button. And in jQuery part, assign each of them a click event.
Pseudocode:
<button class="cart-btn">Add To Cart</button>

$('.cart-btn').each(function() {
	let id = $(this).val()
	$(this).on('click', function() {
		//make post request here
	})
}
#18

In this what will$(this).Val() do

#19

Will it point to the element which is being iterated currently but if we do the task this way then how can we access the information of product

#20

can we use the value attribute in the button tag and store the product_id in that attribute and get the value of the value attribute of each button tag after initializing the id variable