How to read values of hidden field and Textboxes in jQuery

Question

I have this view model below, from which I am trying to read the values of of the hidden fields and textboxes however, I am having an error of:

Uncaught TypeError: Cannot call method 'value' of undefined

I have tried to use val(), text(), val, text, value() and value but all didn't work. I wonder what am I doing wrong?

The view

@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>

The 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>

This is how the above view is renderring:

Answer 1

You are using

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

It's wrong, to select an element using it's name you may use something like this:

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

To get the value just use

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

Update: The ProductID is used as id in the rendered HTML so try this to select it using id:

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

This is a working example.

Answer 2

This is the working code - I also had to delete an script file which I was referencing in the Layout but didn't exist - the file wasn't related to this page at all but in the end this is the solution:

 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>