Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

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:
 function Calsum() {
            var qnt = $('#QuantityOnOrder').val();
            var pric = $('#Price').val();
            if ((qnt * pric) <= 0)
                $('#extended').val(pric);
            else
                $('#extended').val(qnt * pric);
        }

Open in new window


and then I wrote this in the:
$
$(document).ready(function () {
('#QuantityOnOrder').change(function () {
                Calsum();
            });

Open in new window


Thanks,
0
Moti Mashiah
Asked:
Moti Mashiah
  • 3
  • 3
1 Solution
 
Ioannis ParaskevopoulosCommented:
Hi,

It would be useful to also give use the html output. Another thing is that you have not added the app.jpg. A bit of more info on what is your problem, like, is there any error that you get? Why do you think what you have written does not work?

Giannis
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
sorry , I forgot to upload the file:) here you go.


thanks ,
app.jpg
0
 
Ioannis ParaskevopoulosCommented:
Could you include the HTML output of that?

Is the value in currency format?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Moti Mashiah.NET DeveloperAuthor Commented:
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:

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

Open in new window


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

Open in new window

0
 
Ioannis ParaskevopoulosCommented:
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:
<input type="text" class="form-control" width = "25px" />

Open in new window


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"})

Open in new window


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})

Open in new window


And change your way to call the function to:
$('.QuantityOnOrder').change(function (event) {
    Calsum(event.target.id);
});

Open in new window


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);
}

Open in new window


You may check out a working example at JS Fiddle.

Giannis
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
Thank you for the great solution.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now