CODEWITHSUNDEEP
javascriptjqueryhtml
antonlab
antonlab

Reputation: 343

Calculation for discount price not showing up as a number in jquery?

I'm trying to make a form that updates ticket prices based on day and time selected, where on certain days it will be discounted and the other days it will not.

As far as pricing of tickets is concerned, I've been using HTML to store and manipulate the values, like so:

<tr>
    <td>Adult</td>
        <td>
            <select class="qty" name="SA">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td>
           <input type="text" value="18.00" class="price" readonly>
        </td>
        <td align="center">
            <span class="amount">$0.00</span>
        </td>
    </tr>

How it works

JS/jquery used for calculation

    //price of seating
function calculatePrice() {

    var time = $("#whichSession").val(); // sets time to value
    var day = $("#whichDay").val(); // sets day to value

    var sum = 0;

    $('#bookingTable > tbody  > tr').each(function () {
        var qty = $(this).find('option:selected').val();
        var price = $(this).find('.price').val();
        var amount = (qty * price)
        sum += amount;
        $(this).find('.amount').text('$' + amount.toFixed(2));
    });
    //just update the total to sum  
    $('#totalprice').val(sum.toFixed(2));
}

Another user has suggested that I create a new function that updates the value of the price in real-time so that it can get the appropriate discount values.

JS/jquery used for calculating discount prices

// calls get price function on day change
$('.qty').change(function () {
    getPrices();
});

// sets value of price based on day and time
function getPrices ( day, time ) {  
  if ( day=='mon' || day == 'tue' || time=='1pm' ) {
    prices = {SA:12, SP:10, SC:8, FA:25, FC:20, B1:20, B2:20, B3:20}
  } else {
    prices = {SA:18, SP:15, SC:12, FA:30, FC:25, B1:30, B2:30, B3:30}
  }
  return prices;
}

My issue

When I use alert to show what value it's actually changing it to, it seems to be the correct one. However, it prints as '$NaN' in the span which is meant to show the subtotal amount for each ticket.

JSFiddle

I've created a fiddle so you guys can see how the whole thing works. Please excuse if any of the code is dodgy. It works a lot better when it's actually on my website.

Sorry for the long post. I just wanted to make sure I was being extremely clear with my issue. Please let me know if anything is unclear and I'll try to clarify.

Thanks in advance!

Upvotes: 2

Views: 850

Answers (3)

MaxZoom
MaxZoom

Reputation: 7753

It seems that specific person type need to be used to access the correct price. You may need to read its value as shown below:

$('#bookingTable > tbody  > tr').each(function () {
  var type= $(this).find('select:first').attr('name');
  var qty = $(this).find('option:selected').val();
  var amount = (qty * price[type])
  sum += amount;

  $(this).find('.amount').text('$' + amount.toFixed(2));
});

Upvotes: 1

rby
rby

Reputation: 786

One possible solution is to save your initial selection in a variable and then use $.each to iterate through prices, which is the issue (it being an object). Here's a modified code from your JSFiddle:

var subTotals = $('#bookingTable > tbody  > tr');
var index = 0;
$.each(prices,function (key,value) {
    var qty = subTotals.eq(index).find('option:selected').val();
    var amount = (qty * value)

    alert(amount);
    sum += amount;

    subTotals.eq(index++).find('.amount').text('$' + amount.toFixed(2));
});

Hope this help.

Upvotes: 0

ThiagoPXP
ThiagoPXP

Reputation: 5462

The problem is that your function getPrices() is returning a JavaScript object and not a number.

So if you do: 

var amount = (qty * prices.SP);

instead of: 

var amount = (qty * price);

Your amount is a Number and you can do Math operations on it

Upvotes: 2

Related Questions