MVC 4
Hi guys ,
I wrote some application MVC4 and I have some difficult time to find how to calculate through jquery.
What I would like to do is to calculate between two column and give the result in the third column.
by just inserting the quantity. I have attached the example in app.jpg.
the Jquery code I wrote for this:
and then I wrote this in the:
Thanks,
I wrote some application MVC4 and I have some difficult time to find how to calculate through jquery.
What I would like to do is to calculate between two column and give the result in the third column.
by just inserting the quantity. I have attached the example in app.jpg.
the Jquery code I wrote for this:
function Calsum() {
var qnt = $('#QuantityOnOrder').val();
var pric = $('#Price').val();
if ((qnt * pric) <= 0)
$('#extended').val(pric);
else
$('#extended').val(qnt * pric);
}and then I wrote this in the:
$
$(document).ready(function () {
('#QuantityOnOrder').change(function () {
Calsum();
});Thanks,
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Could you include the HTML output of that?
Is the value in currency format?
Is the value in currency format?
ASKER
HI sorry for the delay i was on vacation.
here is my HTML output code:
this is the HTML view and the second code is the partial view:
here is my HTML output code:
this is the HTML view and the second code is the partial view:
@{
ViewBag.Title = "NewQuotes";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model ALThompsonCRM.Models.Info.CustomerQuote
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
Quote
</div>
<div class="panel-body">
<div id="table-content" class="table-responsive">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<table class="table table-bordered">
<tr>
<td>
<h3>Customer Information:</h3>
<table class="table table-bordered">
<tr>
<th valign="top">Customer ID: </th>
<td>
@Html.TextBoxFor(m => m.CustomerID, new { @class = "inp-form" })
</td>
<th valign="top">Customer Name: </th>
<td>
@Html.TextBoxFor(m => m.LastName, new { @class = "inp-form" })
</td>
<th valign="top">Phone: </th>
<td>
@Html.TextBoxFor(m => m.PhoneNumber, new { @class = "inp-form" })
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h3>Shipping Information:</h3>
<table class="table table-bordered">
<tr>
<th valign="top">Carrier: </th>
<td>
@Html.TextBoxFor(m => m.carrier, new { @class = "inp-form" })
</td>
<th valign="top">Shipping ServiceID: </th>
<td>
@Html.TextBoxFor(m => m.ShippingServiceID, new { @class = "inp-form" })
</td>
<th valign="top">Shipping Charge: </th>
<td>
@Html.TextBoxFor(m => m.ShippingChargeOnOrder, new { @class = "inp-form" })
</td>
</tr>
<tr>
<th valign="top">Tracking Number:</th>
<td>
@Html.TextBoxFor(m => m.ShippingTrackingNumber, new { @class = "inp-form" })
</td>
<th valign="top">Notes: </th>
<td colspan="3">
@Html.TextAreaFor(m => m.ShippingNotes, new { @class = "form-textarea" })
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h3>Extra Informaton:</h3>
<div id="calen">
<table class="table table-bordered">
<tr>
<th valign="top">Comment: </th>
<td>
@Html.TextAreaFor(m => m.Comment, new { @class = "form-textarea" })
</td>
<th valign="top">Expiration Date: </th>
<td>
@Html.TextBoxFor(m => m.ExpirationOrDueDate, new { @class = "form-control datepicker", @style = "width: 100px;", placeholder = "MM/DD/YYYY" })
</td>
<th valign="top">Reference: </th>
<td>
@Html.TextBoxFor(m => m.ReferenceNumber, new { @class = "inp-form" })
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<h3>Item List:</h3>
@Html.DropDownList("iList", ALThompsonCRM.Helper.ListHelper.GetItems(), new { @class = "styledselect_form_1" })
<input type="button" value="Get Item" onclick="PurchaseItem();" />
<br />
<div id="pur_items">
@Html.Partial("_ListOfItems", Model.items)
</div>
</td>
</tr>
<tr>
<td>
<h4>Grand Total: @Model.grandTotal</h4>
</td>
</tr>
<tr>
<td valign="top">
<input type="submit" value="Submit" class="form-submit" /><input type="submit" value="Reset" class="form-reset" />
</td>
</tr>
</table>
}
<div class="btn-group pull-right">
<a class="btn btn-primary btn-sm" title="Back" href="/Project/QuotesIndex/5018">Back</a>
</div>
</div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker();
$("#SearchString").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Ajax/GetItems",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.ItemLookupCode,
value: item.ID
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (even, ui) {
alert(ui.item.id);
//window.location.href = '/Home/details/' + ui.item.id;
}
});
$('#QuantityOnOrder').change(function () {
Calsum();
});
});
function PurchaseItem() {
var code = $('#iList').val();
$.ajax({
type: "POST",
url: "/Ajax/AddItemToList",
dataType: "html",
data: { id: code },
success: function (data) {
$("#pur_items").html(data);
//$("#product-table tbody").append(data);
}
});
}
function Calsum() {
var qnt = $('#QuantityOnOrder').val();
var pric = $('#Price').val();
if ((qnt * pric) <= 0)
$('#extended').val(pric);
else
$('#extended').val(qnt * pric);
}
function DelItem(id) {
var res = confirm('You want to delete this item??');
if (res) {
$.ajax({
type: "POST",
url: "/Ajax/DeleteItem",
dataType: "html",
data: { id: id },
success: function (data) {
$("#pur_items").html(data);
$("#pur_items").focus();
alert("Item deleted sucessfully.");
}, error: function (xhr, err) {
alert("Error occured, Please try again.");
}
});
}
}
</script>
}@model IEnumerable<ALThompsonCRM.Models.ViewModel.ItemList>
@*<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">*@
<table class="table table-bordered" id="product-table">
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Extended</th>
<th>SalesRep</th>
<th>Options</th>
</tr>
@{int i = 1; }
@foreach (var itm in Model)
{
string pric = "prc" + i.ToString();
string extd = "ext" + i.ToString();
<tr>
<td>@itm.Description</td>
<td style="text-align: center;">@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control", @width = "25px" })</td>
<td id="@pric" style="text-align: center;">@string.Format("{0:c}", itm.Price)</td>
<td id="@extd" style="text-align: center;">@String.Format("{0:c}", itm.extended)</td>
<td style="text-align: center;">@itm.SalesRepID</td>
<td><a class="btn btn-sm btn-primary" onclick="return DelItem(@itm.ID);" title="Delete" href="#">Delete</a></td>
</tr>
i = i + 1;
}
</table>
Ok, this is what i get from what you have:
1. You have an @Html.TextBoxFor that you think it should produce a text with an id. but what it will produce is something like:
There is no id there. If you want to add an id you should add it as:
That way you may have an id. But since this is in a loop, it will produce many elements with the same id, which is not "allowed" (it will produce them but it want be valid).
In order to solve this, i would recommend to not use an id but rather a class:
And change your way to call the function to:
and the function itself:
You may check out a working example at JS Fiddle.
Giannis
1. You have an @Html.TextBoxFor that you think it should produce a text with an id. but what it will produce is something like:
<input type="text" class="form-control" width = "25px" />There is no id there. If you want to add an id you should add it as:
@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control", @width = "25px" , @id="QuantityOnOrder"})That way you may have an id. But since this is in a loop, it will produce many elements with the same id, which is not "allowed" (it will produce them but it want be valid).
In order to solve this, i would recommend to not use an id but rather a class:
@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control QuantityOnOrder", @width = "25px" , @id=i})And change your way to call the function to:
$('.QuantityOnOrder').change(function (event) {
Calsum(event.target.id);
});and the function itself:
function Calsum(id) {
var qnt = $('#'+id).val();
var pric = $('#prc'+id).text();
if ((qnt * pric) <= 0)
$('#ext'+id).text(pric);
else
$('#ext'+id).text(qnt * pric);
}You may check out a working example at JS Fiddle.
Giannis
ASKER
Thank you for the great solution.
ASKER
thanks ,
app.jpg