Solved

MVC 4

Posted on 2014-09-24
6
122 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 500 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to hide contact form only if no validation errors 4 64
CSS question 16 62
Make Float not to Wrap 15 65
How do I allow for non standard CSV file 9 45
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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

732 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