CODEWITHSUNDEEP
javascriptjqueryhtml
antonlab
antonlab

Reputation: 343

How to reference object array in jquery/JS?

I'm trying to make a form that updates ticket prices based on day and time selected.

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

Now here's my problem

So far the base price calculation is down. My next step is to account for discounts if certain days/times are selected.

I've been given a snippet to work with, which I've had to convert from PHP to javascript (please point out any mistakes in the code if you see any) and assume is using an object array:

function getPrices ( day, time ) {
  var prices = {};
  if ( day=='Monday' || day == 'Tuesday' || time=='1PM' ) {
    prices['SA']=12;
    prices['SP']=10;
    prices['SC']=8;
    prices['FA']=25;
    prices['FC']=20;
    prices['B1']=20;
    prices['B2']=20;
    prices['B3']=20;
  } else {
    prices['SA']=18;
    prices['SP']=15;
    prices['SC']=12;
    prices['FA']=30;
    prices['FC']=25;
    prices['B1']=30;
    prices['B2']=30;
    prices['B3']=30;
  }
  return prices;
}

First of all, I'm wondering how to even reference these 'objects'.

Second, I'm not sure how to merge this with my current code. The way it is now, it gets the "SA" value from the select options using the qty class. This is important because in the form submission data, it needs to show how many of each type of ticket a user purchased.

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!

Upvotes: 1

Views: 438

Answers (1)

BobbyTables
BobbyTables

Reputation: 4685

You should execute the function on every change of the day dropdown, and on any time dropdown change. Then pass those values to the function, and set the price column to the according value

//this gets the correct prices
var prices = getPrices($("#whichDay").val(), $("#whichSession").val())
//this is how you access the prices returned
alert(prices.SA)
alert(prices.SP)
//then you need to target the correct price elements with jQuery and set according price

And you can rewrite the objects like this to get less code:

   prices = {SA:12, SP:10, SC:8, FA:25, FC:20, B1:20, B2:20, B3:20}

Upvotes: 1

Related Questions