如何在 Jquery 中讀取隱藏和文本框的值

Question

我在下面有這個視圖模型，我試圖從中讀取隱藏字段和文本框的值，但是我有一個錯誤：

未捕獲的類型錯誤：無法調用未定義的方法“值”

我曾嘗試使用 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在呈現的HTML用作id因此嘗試使用id選擇它：

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

這是一個工作示例。

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>