ASP.Net MVC: Calculate Price on Plus and Minus Button Click inside Modal Popup using JavaScript

65sametk...

SOLVED CLOSED ACTIVE ANSWERED
User: 65sametkaya65
Posted: on Nov 26, 2023 09:44 PM
Forum: ASP.Net MVC
Answer: 1
Views: 1219

Hello.

I made a pop-up screen like in the picture.

When you press the + - button on this screen, I want the price on the side and the total at the bottom to change.

I want the total and price to be updated when you press the edit button without closing the opened window.

How can I do that? Thank you.

<div class="modal" id="Modal1" >
    <div class="modal-dialog" id="Modal1">
        <div class="modal-content">
         
            <div class="modal-body"  >
                <div>
                    <div class="w3-container">
                        <table class="w3-table-all" style="color: #1b8bb4 ">

                            <tr>
                                @foreach (var s in Model.SEPETs)
                                {
                                <tr>
                                    <td>@s.STOKADI</td>
                                    <td>
                                        <button class="quantity-minus" onclick="azal(this)" style="">-</button>
                                        <input type="text" class="quantity-input" name="MIKTAR" id="txtmiktar" value="@s.MIKTAR" style="" />
                                        <button class="quantity-plus" type=button onclick="art(this)" style="">+</button>
                                        <script type="text/javascript">
                                            function azal(ele) {
                                                if (ele.nextSibling.nextSibling.value > 1) {
                                                    ele.nextSibling.nextSibling.value = parseInt(ele.nextSibling.nextSibling.value) - 1;
                                                }
                                            }

                                            function art(ele) {
                                                if (ele.previousSibling.previousSibling.value > 0) {
                                                    ele.previousSibling.previousSibling.value = parseInt(ele.previousSibling.previousSibling.value) + 1;
                                                }
                                            }
                                        </script>
                                    </td>
                                    <td>@((System.Data.SqlTypes.SqlDecimal?)s.TUTAR)₺</td>
                                    <td>
                                        <button class="btn btn-warning">Düzenle</button>
                                    </td>
                                </tr>
                            }
                            </table>
                        </div>
                        <h6></h6>
                        @using (Html.BeginForm("SiparisGonder", "AnaMenu", FormMethod.Get))
                        {

                            <button type="submit" style="margin-left:15px" class="btn btn-warning"><i class="fa fa-trash" aria-hidden="true"></i> </button>
                            @*<input type="text" name="MASAID" value="@ViewBag.masaid" />*@
                            <input type="text" name="FIRMAKODU" value="@ViewBag.firma" hidden />
                            <input type="text" name="SIPARIS" value="1" hidden />
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
                            <button type="submit" style="width:320px" class="btn btn-primary">Sepeti Onayla</button>
                            <h6></h6>
                            if (ViewBag.masaid == 0)
                            {
                                <input type="text" name="MASAID" value="@ViewBag.masaid" />
                            }
                            else
                            {
                                <input type="text" name="MASAID" value="@ViewBag.masaid" hidden />
                            }
                            <input type="text" name="ADI" placeholder="Adınızı Soyadınızı Yazınız" style=" width:240% ; height:40px ;  margin-left:15px" />
                            <input type="text" name="NOTU" placeholder="Sipariş Notunuz" style=" width:240% ; height:40px ;  margin-left:15px" />
                        }
               </div>
            </div>
        </div>
    </div>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 27, 2023 10:22 AM
Report

Hi 65sametkaya65,

Add HiddenField to set and get the original price.

Then calculate the the total based on the TextBox and the HiddenField value and display.

Refer below example.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <div class="item">
            <button class="quantity-minus" onclick="azalt(this)">-</button>
            <input class="quantity-input" id="sonuc" type="text" value="1" />
            <button class="quantity-plus" type=button onclick="arttir(this)">+</button>
            <input type="hidden" class="amount" value="50" />
            <span class="total">50</span>₺
        </div>
        <div class="item">
            <button class="quantity-minus" onclick="azalt(this)">-</button>
            <input class="quantity-input" id="sonuc" type="text" value="1" />
            <button class="quantity-plus" type=button onclick="arttir(this)">+</button>
            <input type="hidden" class="amount" value="88" />
            <span class="total">88</span>₺
        </div>
        <div class="item">
            <button class="quantity-minus" onclick="azalt(this)">-</button>
            <input class="quantity-input" id="sonuc" type="text" value="1" />
            <button class="quantity-plus" type=button onclick="arttir(this)">+</button>
            <input type="hidden" class="amount" value="2" />
            <span class="total">2</span>₺
        </div>
        <div class="item">
            <button class="quantity-minus" onclick="azalt(this)">-</button>
            <input class="quantity-input" id="sonuc" type="text" value="1" />
            <button class="quantity-plus" type=button onclick="arttir(this)">+</button>
            <input type="hidden" class="amount" value="505" />
            <span class="total">505</span>₺
        </div>
 
        <script type="text/javascript">
            function azalt(ele) {
                if (ele.nextSibling.nextSibling.value > 1) {
                    ele.nextSibling.nextSibling.value = parseInt(ele.nextSibling.nextSibling.value) - 1;
                    var final = parseFloat(ele.parentNode.getElementsByClassName('amount')[0].value) * parseFloat(ele.nextSibling.nextSibling.value);
                    ele.parentNode.getElementsByClassName('total')[0].innerHTML = final;
                }
            }
 
            function arttir(ele) {
                if (ele.previousSibling.previousSibling.value > 0) {
                    ele.previousSibling.previousSibling.value = parseInt(ele.previousSibling.previousSibling.value) + 1;
                    var final = parseFloat(ele.parentNode.getElementsByClassName('amount')[0].value) * parseFloat(ele.previousSibling.previousSibling.value);
                    ele.parentNode.getElementsByClassName('total')[0].innerHTML = final;
                }
            }
        </script>
    </div>
</body>
</html>

Demo

Updated Code

<div class="modal" id="Modal1">
    <div class="modal-dialog" id="Modal1">
        <div class="modal-content">
 
            <div class="modal-body">
                <div>
                    <div class="w3-container">
                        <table class="w3-table-all" style="color: #1b8bb4 ">
 
                            <tr>
                                @foreach (var s in Model.SEPETs)
                                {
                                <tr>
                                    <td>@s.STOKADI</td>
                                    <td>
                                        <button class="quantity-minus" onclick="azal(this)" style="">-</button>
                                        <input type="text" class="quantity-input" name="MIKTAR" id="txtmiktar" value="@s.MIKTAR" style="" />
                                        <button class="quantity-plus" type=button onclick="art(this)" style="">+</button>
                                        <script type="text/javascript">
                                            function azalt(ele) {
                                                if (ele.nextSibling.nextSibling.value > 1) {
                                                    ele.nextSibling.nextSibling.value = parseInt(ele.nextSibling.nextSibling.value) - 1;
                                                    var final = parseFloat(ele.parentNode.getElementsByClassName('amount')[0].value) * parseFloat(ele.nextSibling.nextSibling.value);
                                                    ele.parentNode.getElementsByClassName('total')[0].innerHTML = final;
                                                }
                                            }
 
                                            function arttir(ele) {
                                                if (ele.previousSibling.previousSibling.value > 0) {
                                                    ele.previousSibling.previousSibling.value = parseInt(ele.previousSibling.previousSibling.value) + 1;
                                                    var final = parseFloat(ele.parentNode.getElementsByClassName('amount')[0].value) * parseFloat(ele.previousSibling.previousSibling.value);
                                                    ele.parentNode.getElementsByClassName('total')[0].innerHTML = final;
                                                }
                                            }
                                        </script>
                                    </td>
                                    <td>
                                        <input type="hidden" class="amount" value="@s.TUTAR" />
                                        <span class="total">@((System.Data.SqlTypes.SqlDecimal?)s.TUTAR)</span>₺
                                    </td>
                                    <td>
                                        <button class="btn btn-warning">Düzenle</button>
                                    </td>
                                </tr>
                            }
                            </table>
                        </div>
                        <h6></h6>
                        @using (Html.BeginForm("SiparisGonder", "AnaMenu", FormMethod.Get))
                        {
 
                            <button type="submit" style="margin-left:15px" class="btn btn-warning"><i class="fa fa-trash" aria-hidden="true"></i> </button>
                            @*<input type="text" name="MASAID" value="@ViewBag.masaid" />*@
                            <input type="text" name="FIRMAKODU" value="@ViewBag.firma" hidden />
                            <input type="text" name="SIPARIS" value="1" hidden />
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
                            <button type="submit" style="width:320px" class="btn btn-primary">Sepeti Onayla</button>
                            <h6></h6>
                            if (ViewBag.masaid == 0)
                            {
                                <input type="text" name="MASAID" value="@ViewBag.masaid" />
                            }
                            else
                            {
                                <input type="text" name="MASAID" value="@ViewBag.masaid" hidden />
                            }
                            <input type="text" name="ADI" placeholder="Adınızı Soyadınızı Yazınız" style=" width:240% ; height:40px ;  margin-left:15px" />
                            <input type="text" name="NOTU" placeholder="Sipariş Notunuz" style=" width:240% ; height:40px ;  margin-left:15px" />
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

ASP.Net MVC: Calculate Price on Plus and Minus Button Click inside Modal Popup using JavaScript

Company

Explore

Follow us

Contact Us