Im trying to build a cart function for the existing Food ordering systemThere the user can view the product price in sectionltdiv class34productprice mt534gt ltspan class34productprice productpricelarge34gtHtmlDisplayFormodel gt modelProductPriceltspangtltdivgt If the selected product is customizable I show the extra items in the view with CheckboxSo what I want to know is if the customer selects any extra items the extra item price sho

ASP.Net MVC: Add Price to Main Price when CheckBox is Checked using jQuery

relaxing...

SOLVED CLOSED ACTIVE ANSWERED
User: relaxingmusicym
Posted: on May 20, 2023 09:14 AM
Forum: ASP.Net MVC
Answer: 1
Views: 1735
Sample Code: Download

I'm trying to build a cart function for the existing Food ordering system.

There, the user can view the product price in section.

<div class="product__price m-t-5">
  <span class="product__price product__price--large">$@Html.DisplayFor(model => model.ProductPrice)</span>
</div>

If the selected product is customizable, I show the extra items in the view with Checkbox.

So what I want to know is, if the customer selects any extra items, the extra item price should be added to the main price.

Also, if a customer is unchecked, then it should subtract from the main amount.

Want to know how to do this using JavaScript?

This is the HTML code.

<div class="col-md-7">
   <div class="product-details-box m-b-60">
     <h4 class="font--regular m-b-20">@Html.DisplayFor(model => model.ProductName)</h4>
     <div class="product__price m-t-5">
       <span class="product__price product__price--large">$@Html.DisplayFor(model => model.ProductPrice)</span>
     </div>
     <div class="product-var p-tb-30">
       <div class="product-quantity product-var__item d-flex align-items-center">
         <span class="product-var__text">Quantity: </span>
         <form class="quantity-scale m-l-20">
           <div class="value-button" id="decrease" onclick="decreaseValue()">-</div>
           <input type="number" id="number" name="number" value="1" />
           <div class="value-button" id="increase" onclick="increaseValue()">+</div>
         </form>
       </div>
       <div>
         <h4 class="font--regular m-b-20">Add Some Extra</h4> 
         @if (Model.CustomizableFoods.Count!=0) 
         { 
         foreach (var item in Model.CustomizableFoods)
         { 
         <div class="row">
           <ul class="list">
             <li class="list__item">
               <label class="label--checkbox">
                 <input type="checkbox" class="checkbox"> &nbsp; &nbsp; &nbsp; @item.ExtraItem - @item.Extra_Item_Price </label>
             </li>
           </ul>
         </div>
            } 
        }
       </div>
       <div class="product-var__item">
         <input class="btn btn--long btn--radius-tiny btn--green btn--green-hover-black btn--uppercase btn--weight m-r-20" type="submit" value="Add to cart" />
         <a href="wishlist.html" class="btn btn--round btn--round-size-small btn--green btn--green-hover-black">
           <i class="fas fa-heart"></i>
         </a>
       </div>
       <div class="product-var__item">
         <span class="product-var__text">Guaranteed safe checkout </span>
       </div>
       <div class="product-var__item d-flex align-items-center">
         <span class="product-var__text">Share: </span>
         <ul class="product-social m-l-20">
           <li>
             <a href="#">
               <i class="fab fa-facebook-f"></i>
             </a>
           </li>
           <li>
             <a href="#">
               <i class="fab fa-twitter"></i>
             </a>
           </li>
           <li>
             <a href="#">
               <i class="fab fa-pinterest-p"></i>
             </a>
           </li>
         </ul>
       </div>
     </div>
   </div>
</div>

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 22, 2023 01:30 AM
Report

Hi relaxingmusic...,

Refer below sample.

For ProductPrice and ExtraItemPrice i have used span element and for retaining actual ProductPrice used HiddenField.

So please verify the html with your code.

Model

public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public int ProductPrice { get; set; }
    public List<CustomizableFood> CustomizableFoods { get; set; }
}

public class CustomizableFood
{
    public string ExtraItem { get; set; }
    public int Extra_Item_Price { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        Product product = new Product();
        product.ProductName = "Chicken Baken Pizza (M)";
        product.ProductPrice = 1800;
        product.CustomizableFoods = new List<CustomizableFood> {
            new CustomizableFood(){ ExtraItem="Extra Cheese",Extra_Item_Price=100},
            new CustomizableFood(){ ExtraItem="Grill Chicken",Extra_Item_Price=450}
        };
        return View(product);
    }
}

View

@model Sample_133927.Models.Product

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
    <div class="row">
        <div class="col-md-7">
            <div class="product-details-box m-b-60">
                <h4 class="font--regular m-b-20">@Html.DisplayFor(model => model.ProductName)</h4>
                <div class="product__price m-t-5">
                    <input id="hfProductPrice" type="hidden" value="@Model.ProductPrice" />
                    <span class="product__price product__price--large">$<span id="lblProductPrice">@Model.ProductPrice</span></span>
                </div>
                <div class="product-var p-tb-30">
                    <div class="product-quantity product-var__item d-flex align-items-center">
                        <span class="product-var__text">Quantity: </span>
                        <form class="quantity-scale m-l-20">
                            <div class="value-button" id="decrease" onclick="decreaseValue()">-</div>
                            <input type="number" id="number" name="number" value="1" />
                            <div class="value-button" id="increase" onclick="increaseValue()">+</div>
                        </form>
                    </div>
                    <div>
                        <h4 class="font--regular m-b-20">Add Some Extra</h4>
                        @if (Model.CustomizableFoods.Count != 0)
                        {
                            foreach (var item in Model.CustomizableFoods)
                            {
                                <div class="row">
                                    <ul class="list">
                                        <li class="list__item">
                                            <label class="label--checkbox">
                                                <input id="chkExtraItem" type="checkbox" class="checkbox"> &nbsp; &nbsp; &nbsp; @item.ExtraItem - <span id="lblExtraItemPrice">@item.Extra_Item_Price</span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            }
                        }
                    </div>
                    <div class="product-var__item">
                        <input class="btn btn--long btn--radius-tiny btn--green btn--green-hover-black btn--uppercase btn--weight m-r-20" type="submit" value="Add to cart" />
                        <a href="wishlist.html" class="btn btn--round btn--round-size-small btn--green btn--green-hover-black">
                            <i class="fas fa-heart"></i>
                        </a>
                    </div>
                    <div class="product-var__item">
                        <span class="product-var__text">Guaranteed safe checkout </span>
                    </div>
                    <div class="product-var__item d-flex align-items-center">
                        <span class="product-var__text">Share: </span>
                        <ul class="product-social m-l-20">
                            <li>
                                <a href="#">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fab fa-pinterest-p"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#number').change(function () {
                var productPrice = parseFloat($('#hfProductPrice').val());
                var quantity = parseFloat($('#number').val());
                if (quantity <= 0) {
                    quantity = 0;
                }
                $('#lblProductPrice').html((productPrice * quantity) + ExtraItemPrice());
            });

            $(".checkbox").on('click', function () {
                var productPrice = parseFloat($('#hfProductPrice').val());
                var quantity = parseFloat($('#number').val());
                if (quantity <= 0) {
                    quantity = 0;
                }
                $('#lblProductPrice').html((productPrice * quantity) + ExtraItemPrice());
            });

            function ExtraItemPrice() {
                var extraItemPrice = 0;
                $.each($(".checkbox"), function (index, item) {
                    if ($(this).is(':checked')) {
                        extraItemPrice = extraItemPrice + parseFloat($(this).closest('label').find("#lblExtraItemPrice").html());
                    }
                });

                return parseFloat(extraItemPrice);
            }
        });
    </script>
</body>
</html>

Screenshot

ASP.Net MVC: Add Price to Main Price when CheckBox is Checked using jQuery

Company

Explore

Follow us

Contact Us