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:

![enter image description here](https://i.stack.imgur.com/Tjai8.png)