如何读取具有动态 ID 的文本框的文本框值？

Question

我有 2 个输入，如下所示。其中一个是按钮，另一个是文本框。 qty-input 用于输入产品的数量，当我使用 jquery 单击按钮时。我更新了我的购物车。当我将它硬编码为 1 时它可以工作，但我无法通过从文本框中读取而不回发来弄清楚如何做到这一点。

下面的代码属于部分视图中的 1 个产品，它显示在一个列表中，我需要为每个创建的文本框分配 id，所以这个文本框应该属于按钮。

当我简单地使用var quantity = $('.qty-input').val(); 时，它仅适用于第一个生成的文本框。这意味着如果我想将第二个产品添加到购物车中，它会因为它具有相同的类而感到困惑。因此我必须使用 Id。 另一个想法可以使用 angular.js，我看到了一些例子，它看起来很容易实现，但我不知道该怎么做？

jquery 或 angular.js，我需要你的帮助。谢谢。

在我看来

     var quantity = 1;
   string addtocartlink = "";
addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity });

    <div class="cart-input">
           <input class="qty-input" id="@Model.Id" data-val="true" type="text" value="1">
          <input type="button" value="@(addToCartClass)" class="button-2 product-box-add-to-cart-button @addToCartClass" onclick="AjaxCart.addproducttocart_catalog('@addtocartlink');return false;" />
</div>

我的 javascript

  addproducttocart_catalog: function (urladd,id) {
        if (this.loadWaiting != false) {
            return;
        }
        this.setLoadWaiting(true);
        var quantity = $(id).val();
        urladd = urladd.substring(0, urladd.length - 1) + quantity;

        $.ajax({
            cache: false,
            url: urladd,
            type: 'post',
            success: this.success_process,
            complete: this.resetLoadWaiting,
            error: this.ajaxFailure
        });
    },

Answer 1

有两种方法可以实现它。

一个。要获取 id ，您可以简单地在 javascript 中声明一个变量：

var id = '@Model.Id';

b.您可以为输入元素分配一个属性。

<input class="qty-input" id="@Model.Id" data-val="true" type="text"    unique-id="qty" value="1">

var id = $("input[unique-id='qty']").attr("id");

Answer 2

在您的 cmets 中，您有多个用于 Quantity 和关联按钮的文本框输入。您可以使用相对选择器来处理此问题，无需添加任何 id 属性。将您的 html 更改为

<div class="cart-input">
    <input class="qty-input" type="text" value="1">
    <input type="button" value="Add to cart" class="button-2 product-box-add-to-cart-button @addToCartClass" data-id="@Model.Id" />
</div>

请注意，productID 值已作为data 属性添加到按钮中。然后脚本将是

var url = '@Url.RouteUrl("AddProductToCart-Catalog")';
$('.product-box-add-to-cart-button').click(function() {
  var id = $(this).data('id');
  var qty = $(this).closest('.cart-input').find('.qty-input').val();
  $.ajax({
    cache: false,
    url: url,
    type: 'post',
    data: { productId: id, shoppingCartTypeId: shoppingCartTypeId, quantity: qty },
    success: this.success_process,
    ....
    });
});

旁注：我从文本框中删除了data-val="true"。这仅在您似乎没有的视图中有关联的ValidationMessageFor() 时才有意义，并且无论如何它仍然允许您输入显然会失败的"ABC"，并且您甚至没有检查它之前是否有效张贴。您应该停止为此使用手动 html 和部分内容，并为您的模型使用 EditorTemplate（其中模型包含属性 int Quantity），并使用强类型 HtmlHelpers 生成您的视图。然后你可以在发布前使用.Valid()的方法检查数量是否有效（如果没有则取消）