?
Solved

MVC 4

Posted on 2014-09-24
6
Medium Priority
?
131 Views
Last Modified: 2014-09-29
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
Comment
Question by:Moti Mashiah
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 2000 total points
ID: 40343445
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40343956
sorry , I forgot to upload the file:) here you go.


thanks ,
app.jpg
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 40343998
Could you include the HTML output of that?

Is the value in currency format?
0
DFW AZURE MEETUP TONIGHT FRI 6PM

We will be discussing what Azure Stack is, how does it fit into the suit of offerings that Azure has currently, and where can it fit into your organizations technology stack. We will also be discussing limitations of the platform while covering various applicable scenarios.

 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40348919
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
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 40349927
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
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 40350195
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question