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.