如何读取隐藏和放大的值Jquery中的文本框

Question

我在下面有这个视图模型，我试图从中读取隐藏字段和文本框的值，但是，我有一个错误：

  

未捕获的TypeError：无法调用未定义的方法'value'

我试过使用val（），text（），val，text，value（）和value但是都没有用。我不知道我做错了什么？

视图

@model Invoice.Web.ViewModels.ProductSelectorVM

<table id="productPriceListGrid">
    <thead>
        <tr>
            <th>            
            </th>
            <th>
                Product
            </th>
            <th>
                Price
            </th>
            <th>
                Discount
            </th>
            <th>
                VAT
            </th>
        </tr>
    </thead>
    <tbody>
     @if (Model.ProductPriceList != null)
        {
            foreach (var product in Model.ProductPriceList)
            {
                <tr>
                    <td>
                        @Html.Hidden("ProductID", product.ProductID)
                    </td>
                    <td>
                        @Html.Label(product.ProductName)
                    </td>
                    <td>
                        @Html.TextBox("Price", product.Price , new { @class = "k-textbox" })
                    </td>
                    <td>
                        @Html.TextBox("Discount", product.Discount)
                    </td>
                    <td>
                        @Html.TextBox("VAT", product.VAT)
                    </td>
                </tr>
            }
        }
    </tbody>
</table>


<div class="row">
    <input type="button" name="GenerateInvoiceButton" id="GenerateInvoiceButton" value="Generate Invoice" onclick="generateInvoice()"  />
</div>

JavaScript

<script>    

    function generateInvoice() {

         debugger;
         var count = 0;
        var allPrices = [];
        $("#productPriceListGrid tr").each(function () {
            var productId = $("hidden[name='ProductID']")[count].value();
            var price = $("input[name='Price']")[count].value();
            var discount = $("input[name='Discount']")[count].value();
            var vat = $("input[name='VAT']")[count].value();

            var priceItem = {};

            priceItem["ProductID"] = productId;
            priceItem["Price"] = price;
            priceItem["Discount"] = discount;
            priceItem["VAT"] = vat;

            allPrices.push(priceItem);

            count++;
        });

        var request = {allPrices : allPrices}

        $.ajax({
            type: "POST",
            url: "/Invoice/GenerateInvoice",
            data: JSON.stringify(request),
            datatype: "JSONP",
            contentType: "application/json; charset=utf-8",
            success: function (returneddata) {
                if (returneddata.ok) {
                    alert(returneddata.message);
                }
            }
        });
    }
</script>

以上视图的呈现方式如下：

非常感谢。

Answer 1

您正在使用

$("hidden[name='ProductID']")[count].value();

错误的是，使用它的名称选择一个元素你可以使用这样的东西：

$("input[name='ProductID']")

获取值只需使用

var valueOfProductId = $("input[name='ProductID']").val();

更新：ProductID在id呈现HTML，因此请尝试使用id选择它：

var valueOfProductId = $('#ProductID').val();

This is a working example

Answer 2

这是工作代码 - 我还必须删除我在布局中引用但不存在的脚本文件 - 该文件根本与该页面无关，但最后这是解决方案：

 function generateInvoice() {

         debugger;
         var count = 0;
        var allPrices = [];
        $("#productPriceListGrid tr").each(function () {
            var productId = $("input[name='ProductID']")[count].value;
            var price = $("input[name='Price']")[count].value;
            var discount = $("input[name='Discount']")[count].value;
            var vat = $("input[name='VAT']")[count].value;

            var priceItem = {};

            priceItem["ProductID"] = productId;
            priceItem["Price"] = price;
            priceItem["Discount"] = discount;
            priceItem["VAT"] = vat;

            allPrices.push(priceItem);

            count++;
        });

        var request = {allPrices : allPrices}

        $.ajax({
            type: "POST",
            url: "/Invoice/GenerateInvoice",
            data: JSON.stringify(request),
            datatype: "JSONP",
            contentType: "application/json; charset=utf-8",
            success: function (returneddata) {
                if (returneddata.ok) {
                    alert(returneddata.message);
                }
            }
        });
    }
</script>