Получить id товара в js

216

03 сентября 2018, 03:40

Есть страничка с товарами. Рядом с каждым товаром иконка "Добавить в корзину".

Мне нужно, чтобы при нажатии на эту иконку в js приходил id товара, который человек добавил в корзину.

 <input type="hidden" id = "idProduct" name = "idProduct" value = "{{$p->id}}">

Id товара хранится в скрытом поле. Однако при нажатии на корзину я всегда получаю Id лишь первого товара в БД. То есть, он всегда равен 1. Вот так пробовал получить:

var idProduct = $("#idProduct").val();

Вот общая форма:

<form method="post" action="#" id="form">
        <div class="col-lg-2">
            <h3>{{$p->name}}</h3>
            <img src="{{$p->image}}" width="200" height="200"><br>
            <h3>{{$p->price}}<a href="#" id = "cartIcon"><span class="glyphicon glyphicon-shopping-cart"  name = "spanIdProduct" onclick="addProductInCart()" style="float: right; margin-right: 15px" value = "{{$p->id}}"></span></a></h3>
            <input type="hidden" id = "idProduct" name = "idProduct" value = "{{$p->id}}">
            {{ csrf_field() }}
        </div>
    </form>

Answer 1

Надо повесить ивент на нажатие, в вашем коде вы получаете ид первого элемента(у вас много полей с одинаковым ид, это не верно, ид может быть только один):

<form method="post" action="#" id="form">
    <div class="col-lg-2 product">
        <h3>{{$p->name}}</h3>
        <img src="{{$p->image}}" width="200" height="200"><br>
        <h3>{{$p->price}}<a href="#" id = "cartIcon"><span class="glyphicon glyphicon-shopping-cart"  name = "spanIdProduct" onclick="addProductInCart()" style="float: right; margin-right: 15px" value = "{{$p->id}}"></span></a></h3>
        <input type="hidden" class = "idProduct" name = "idProduct" value = "{{$p->id}}">
        {{ csrf_field() }}
    </div>
</form>

$('.product').click(function () {
       alert(this.find('.idProduct').val());
});