How to multiply values of two textboxes in Asp.net MVC

Question

I have 3 textboxes, 1st for Quantity, 2nd for Price and 3rd for Total Price.

 <div class="form-group">
            @Html.LabelFor(model => model.quantity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.quantity, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                @Html.ValidationMessageFor(model => model.quantity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.price, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                @Html.ValidationMessageFor(model => model.price, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.totalprice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">  
                    @Html.EditorFor(model => model.totalprice, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.totalprice, "", new { @class = "text-danger" })             
            </div>

and here is the controller:

        [HttpPost]
        public ActionResult Add(Model model)
        {
            obj.Quantity = model.quantity;
            obj.Price = model.price;
            obj.TotalPrice = model.totalprice

            db.Details.Add(obj);
            db.SaveChanges();
            return RedirectToAction("");
        }

now I want to multiply values of 1st and 2nd textboxes and show them in 3rd textbox. For example if users enter 5 in 1st textbox and 100 in 2nd textbox then it automatically shows 500 in 3rd textbox and if users changes value of 1st or 2nd textbox then value of 3rd textbox should also change accordingly. Thanks.

Convert the text from the first two boxes to an integer then multiply the two together, convert that result to a string and place it in the 3rd text box. — Eric J.
– Eric J., Commented Jan 29, 2016 at 20:02
Thanks, but how can I get the values of first two text boxes? We don't have an option to get the value by textbox.Text in MVC, is there any other solution ? — diamond421
– diamond421, Commented Jan 29, 2016 at 20:04
Have a look at BeginForm to post your model to the controller. — GuyVdN
– GuyVdN, Commented Jan 29, 2016 at 20:08

Shyju · Accepted Answer · 2016-01-29 20:11:59Z

6

You can listen to the keyup event of the textboxes in javascript, read the value and do the multiplication and set the resulting value to the third textbox.

Assuming your have jQuery library included in your page.

$(function(){

  $("#quantity,#price").keyup(function(e){

    var q=$("#quantity").val();
    var p=$("#price").val();
    var result="";

    if(q!=="" && p!=="" && $.isNumeric(q) && $.isNumeric(p))
    {
      result = parseFloat(q)*parseFloat(p);
    }
    $("#totalPrice").val(result);

  });

});

Here is a working jsbin sample.

edited Jan 29, 2016 at 20:11

answered Jan 29, 2016 at 20:06

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon A · Accepted Answer · 2017-02-10 12:13:48Z

0

You can use this:

 [HttpPost]
    public ActionResult Add(Model model)
    {
        obj.Quantity = model.quantity;
        obj.Price = model.price;
        obj.TotalPrice = model.totalprice

        model.totalprice = model.quanity * model.price
        db.Details.Add(obj);
        db.SaveChanges();
        return RedirectToAction("");
    }

Hope it helps. I used it in my application and it does the right thing.

answered Feb 10, 2017 at 12:13

Jon A

1372 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to multiply values of two textboxes in Asp.net MVC

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related