How to sum up total javascript jquery

Question

How can i sum up the total from my room price and for the add on price My code for addons and room booking js

$(document).ready(function() {
        $(".bkng").on("click",function(event) {
              event.preventDefault();

            var id = $(this).data('room-id');
          name = $(this).data('name');
        price = $(this).data('price');
                if(id != '')

                {
                    $.ajax(
                {
                    type:"POST",
                    url : "Pages/ajax",
                    data:{id:id,
                        name:name,
                        price:price},


                    success:function(data)
                    {
                        console.dir(data);
                        if (data) {


                        var item = $('<li data-itemprice="'+price+'">'+name+' : '+price+'</li>');
                            $("#test1").html(item);
Total();

Same for my addon js with its same data-itemprice

var item = $('<li data-itemprice="'+price+'">'+name+' : '+price+'</li>');
                            $("#test4").append(item);
Total();

my function for my total & how can i call the function to my html page?

function Total() {

           var total = 0;
         $('li').each(function(index,object){

         total = total + Number($(object).data('itemprice'))

   });

         $("#test2").html("Total:" + total);

    }

Here is the button html of my room and add ons Rooms:

<button data-name = "Single Room" data-price = "2750" class="bkng bkn-room trans_200" data-room-id ="1">BOOK NOW</button>

AddOns:

<button data-name = "Airport Transfer" data-price = "4300"  class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>

My html for the total price display

<h3 class = "your-stay" id = "test2">Total:<span></span></h3>

When you click Addon button then simply add onclick event on this button or call your javascript function CalculateTotal() in onclick button. — Dharmeshsharma
– Dharmeshsharma, Commented Dec 3, 2019 at 4:29

Mohammad Mansoor · Accepted Answer · 2019-12-03 04:30:08Z

1

Call this calculate total function after implementing the li tag from success of ajax return.

answered Dec 3, 2019 at 4:30

Mohammad Mansoor

195 bronze badges

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

7 Comments

Jed Jamir Over a year ago

can you give me an example of how to call a function after implementing my li tag?

Mohammad Mansoor Over a year ago

success:function(data) { console.dir(data); if (data) { var item = $('<li data-itemprice="'+price+'">'+name+' : '+price+'</li>'); $("#test1").html(item); CalculateTotal(); } },

Jed Jamir Over a year ago

it says my CalculateTotal is not defined any idea why?

Mohammad Mansoor Over a year ago

where you declare the CalculateTotal()? isn't it in same js file?

Jed Jamir Over a year ago

its ok now i move them on the same js but it does not display the total price any idea why?

|

Dharmeshsharma · Accepted Answer · 2019-12-03 05:13:51Z

1

$(document).ready(function () {
            var total = 0
            $('li').each(function (index, object) {
                total = total + Number($(object).data('itemprice'))
            });
            $("span").html("Total:-" + total);
        });
        function Total()
        {
            var total = 0
            $('li').each(function (index, object) {
                total = total + Number($(object).data('itemprice'))
            });
            $("span").html("Total:-" + total);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
        <li data-itemprice='200'>
            Room 1
        </li>
        <li data-itemprice='200'>
            Room2
        </li>
    </ul>
    <span> Total</span>
    <button onclick="Total()">Calculate</button>

There are many way to use your javascript function like this

$("#button").click( function()
       {
         CalculateTotal();
       }
    );

edited Dec 3, 2019 at 5:13

answered Dec 3, 2019 at 4:43

Dharmeshsharma

7011 gold badge14 silver badges30 bronze badges

12 Comments

Jed Jamir Over a year ago

it does not display the total price any idea why?

Dharmeshsharma Over a year ago

now then you have to check your CalculateTotal(); function. This function is working properly or not.

Dharmeshsharma Over a year ago

I have edit my answer and add running function but you can see i have also add document. ready so as per your requirements you can use which one is your requirements.

Jed Jamir Over a year ago

do i need to create a <ul> for me to display the total output? because im using a div id to display the total price

Jed Jamir Over a year ago

i tried doing this but the display on total was always this "Total:NaN" can you please tell me why is that the output?

|

Collectives™ on Stack Overflow

How to sum up total javascript jquery

2 Answers 2

7 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related