Question

页面上有产品。每个产品的形式。我将Id产品保留在隐藏的输入中。

@foreach($product as $p)
    <form>
        <div class="col-lg-2 product">
            <h3>{{$p->name}}</h3>
            <img src="{{$p->image}}" width="200" height="200"><br>
            <h3>{{$p->price}}</h3>
            <button type="submit" onclick="addProductInCart()" >Добавить в корзину</button>
            <input type="hidden"  name = "idVal" value = "{{$p->id}}">
            {{ csrf_field() }}
        </div>
    </form>
@endforeach

我需要获取我选择的JS产品ID。

例如：

我将选择Xiaomi Redmi Note 4，并且我必须获得ID =1。如果我选择魅族，则我必须获得ID = 2。现在我每次都得到两个ID。

我的JS代码：

function addProductInCart() {


    event.preventDefault();
    console.log($('form').serializeArray()); 
    var product = 1;
    var token = $("input[name=_token]").val();
    $.ajax({
        type: "POST",
        url: "addToCart",
        data: {"_token": token, "product": product},
        success: function (result) {
            $("#product-count").html(result);

        }
    })
}

结果：

我只需要一个ID，而无需两个。你能帮忙吗？

Answer 1

您不必将其存储在隐藏字段中，只需要将其存储在addproductInCart（）函数中即可

您可以通过以下功能传递值

addProductInCart(<?= $p->id ?>)

在函数中，您可以通过以下操作获取ID

addProductInCart($id)
{
    alert($id);
}

Answer 2

您需要使用this关键字来引用当前单击的元素，然后转到父元素并选择名称为idVal且包含当前if的相关输入产品：

var product_id = $(this).parent().find('[name="idVal"]').val();

您必须将this传递给onClick中的函数：

<button type="button" onclick="addProductInCart(this)">Добавить в

корзину

function addProductInCart(self) {
  event.preventDefault();

  alert($(self).parent().find('[name="idVal"]').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div class="col-lg-2 product">
    <h3>name 1</h3>
    <img src="" width="200" height="200"><br>
    <h3>111</h3>
    <button type="button" onclick="addProductInCart(this)">Добавить в корзину</button>
    <input type="hidden" name="idVal" value="1">
  </div>
</form>
<form>
  <div class="col-lg-2 product">
    <h3>name 2</h3>
    <img src="" width="200" height="200"><br>
    <h3>222</h3>
    <button type="button" onclick="addProductInCart(this)">Добавить в корзину</button>
    <input type="hidden" name="idVal" value="2">
  </div>
</form>
<form>
  <div class="col-lg-2 product">
    <h3>name 3</h3>
    <img src="" width="200" height="200"><br>
    <h3>333</h3>
    <button type="button" onclick="addProductInCart(this)">Добавить в корзину</button>
    <input type="hidden" name="idVal" value="3">
  </div>
</form>

Answer 3

<form class="product-form">
        <div class="col-lg-2 product">
            <h3>{{$p->name}}</h3>
            <img src="{{$p->image}}" width="200" height="200"><br>
            <h3>{{$p->price}}</h3>
            <button type="submit" onclick="addProductInCart(this)" >Добавить в корзину</button>
            <input type="hidden"  name = "idVal" value = "{{$p->id}}">
            {{ csrf_field() }}
        </div>
    </form>

上课。现在，您可以获取与其关联的值。

$('.product-form').submit(function() {
  alert($(this).serialize());

 var product = 1;
    var token = $("input[name=_token]").val();
    $.ajax({
        type: "POST",
        url: "addToCart",
        data: {"_token": token, "product": product},
        success: function (result) {
            $("#product-count").html(result);

        }
    })

  return false;
});

从表单获取ID

3 个答案: