CODEWITHSUNDEEP
javascriptjquery
Jed Jamir
Jed Jamir

Reputation: 77

How to sum up total javascript jquery

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>

Upvotes: 0

Views: 191

Answers (2)

Dharmeshsharma
Dharmeshsharma

Reputation: 691

$(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();
       }
    );

Upvotes: 1

Mohammad Mansoor
Mohammad Mansoor

Reputation: 19

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

Upvotes: 1

Related Questions