Ajax script not working

Question

Hi,

I am facing problem to call an ajax script on onchange event of a textbox.

I have to show a list of quotations in my view and each quotation is having Supplier, Quantity,Price etc. fields. I want to keep the Quantity and price fields as editable.And after editing it should be saved back into db.ie, I have to call a function onblur or onchange event or the textbox.I have written a script and it is no getting invoked.Any help?

I am adding my view code and script below:

following is the code in view to show the required entries in table. I want to update database onblur or onchange  evevnt of textboxes with id
 itemPrice and  itemQuantity. And the ajax script I have written is shown below this code. 

 

@foreach (var item in Model)
                        {
                          bool aprv = Convert.ToBoolean(item.Approved);
                          if (aprv)
                          {
                           var totp = item.Quantity * Convert.ToInt32(item.Price);
                          <tr id="myrowID">
                              <td hidden><input type="hidden" id="quotid" value="@item.QuoteId" /></td>
                              <td>
                                  @Html.DisplayFor(modelItem => item.SKUMaster.Name)
                              </td>
                              <td>
                                  @Html.DisplayFor(modelItem => item.SKUMaster.PackagingType)
                              </td>
                              <td>
                                  @Html.DisplayFor(modelItem => item.SKUMaster.Manufacturer)
                              </td>
                              <td>
                                  @Html.TextBoxFor(modelItem => item.Price, new { @id = "itemPrice"})
                              </td>
                             <td>
                                  @Html.TextBoxFor(modelItem => item.Quantity, new { @id = "itemQuantity"})
                             </td>
                             <td>
                                 <label>@totp</label>
                             </td>
                             <td>
                                  @Html.DisplayFor(modelItem => item.SupplierMaster.SupplierName)
                             </td>
                             <td class="list1">
                                 <a href="#" target="_top">
                                 <img src="~/images/list.png" class="list1" width="17" title="List" height="16" alt="" />
                                 </a>
                             </td>
                       </tr>

                        }
}

The jquery to send changed value of itemPrice textbox to controller is given below:

<script>
  $(document).ready(function () {
    $('#itemPrice').change(function () {
            // get the value from the username field                             
            //var username = $('#username').val();
            //var Price = document.getElementById('itemPrice').val();
            //var Quantity = document.getElementById('itemQuantity').val();
            //var QuoteId = document.getElementById('quotid').val();
            var Price = $("#itemPrice").val();
            var Quantity = $("#itemQuantity").val();
            var QuoteId = $("#quotid").val();
            var QuoteMaster =
            {
                "QuoteId": QuoteId,
                "Quantity": Quantity,
                "Price": Price
            };
            $.ajax({
                url: '/Quot/EditQuot',
                data: { 'id': QuoteId, 'price': Price, 'qty': Quantity },
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data);
                }
            });
           
    });
  });

</script> 

 

It is not working. Any help will be appreciated.
Thanks in advance.