Update text based off select option, multiplied by ticket price

Question

I'm making a bookings page for a cinema and would like people to be able to select the amount of any given ticket and have the subtotal HTML text updated based off the amount of tickets chosen multiplied by the price of the ticket.

HTML

    <table id="tickets">
        <tr>
            <th class="first_column">Ticket Type</th>
            <th class="quantity_select">Quantity</th>
            <th class="column">Subtotal Price</th>
        </tr>
        <tr>
            <td class="first_column" name="SA">Adult</td>
            <td><select class="quantity_select">
                <option value="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 id="subtotal">$xx.xx</td>
        </tr>
        <tr>
            <td class="first_column" name="SP">Concession</td>
            <td><select class="quantity_select">
                <option value="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>$xx.xx</td>
                                </tr>

                                <tr>
                                    <td class="first_column" name="SC">Child</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="FA">First Class Adult</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="FC">First Class Child</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B1">Beanbag - 1 Person</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B2">Beanbag - 2 People</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B3">Beanbag - 3 Children</td>
                                    <td><select class="quantity_select">
                                            <option value="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>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td id="total price">Total Price: </td>
                                    <td id="line_total">$xx.xx</td>
                                </tr>

Here are the ticket prices (screenshot from my webpage) What jQuery would i need to achieve this? Note the exceptions for ticket prices

what jquery you have tried so far?? what issue you have in that? — Niranjan N Raju, Oct 14 '15 at 05:48
form my understanding of your requirement, i think the easiest way to achieve is to have a js method to calculate the sub total first and then calculate the total whenever any changes occur on the drop down(onChange event will do good). From the session day and session time info you can find the exact ticket rate. >don't allow the user to select the ticket type and the quantity until the session day and the session time is selected. >write a method to calculate the sub total and the total and update correspondingly. — flipper, Oct 14 '15 at 06:18

score 0 · Accepted Answer · answered Oct 14 '15 at 07:27

Honestly, this type of question is not really suited to SO. When a person comes here for help, we generally expect that they have made a reasonable attempt to write the code themselves but have run into a specific problem that they were unable to solve.

We also expect the asker to show the actual code they are having the issue with and to be able to articulate what the expected outcome of their code is as well as describe how their current attempt fails to meet the expectation.

With that said, I needed a break tonight so please see the below, it should do exactly what you need. Look through the code and if you have any questions about how something works, do feel free to ask:

$('.update-cost').change(function(){
    
    // define come data to work with 
    var discountedDays = ['Mon','Tues']; // remember to update this if your values are different
    var discountedTimes = ['1 pm']; // remember to update this if your values are different
    var totalCost = 0;
    var costType='regular';
    var priceList={ 
                  adult:{ regular : '18.00', discounted: '12.00' },
             consession:{ regular : '15.00', discounted: '10.00' },
                  child:{ regular : '12.00', discounted: '8.00' },
        firstClassAdult:{ regular : '30.00', discounted: '25.00' },
        firstClassChild:{ regular : '25.00', discounted: '20.00' },
                beanbag:{ regular : '18.00', discounted: '12.00' }
    };
    
   // get day and time 
   var day= $('#session-day').val();
   var time= $('#session-time').val();
    
   // check if discount applies 
   if($.inArray(day,discountedDays)!=-1 || $.inArray(time,discountedTimes)!=-1 ){
       costType='discounted';
   }

    // loop through each row subtotal
   $('.subtotal').each(function(i,e){
       var $select = $(e).closest('tr').find('[data-purchase-type]');
       var purchaseType = $select.data('purchase-type');
       var quantity = $select.val();
       var purchasePrice = parseFloat(priceList[purchaseType][costType]) * 1000; // if you're currious why this math seems unnecessarily complex, see http://stackoverflow.com/questions/588004/is-floating-point-math-broken
       var purchaseTotal = quantity * purchasePrice;
       $(e).text('$'+(purchaseTotal / 1000).toFixed('2'));
       totalCost = totalCost + purchaseTotal;       
   });
    
   // set grand total
   $('#total_price').text('$'+(totalCost / 1000).toFixed('2')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="session-day" class="update-cost">
    <option value="Mon">Mon</option>
    <option value="Tues">Tues</option>
    <option value="Wed">Wed</option>
    <option value="Thur">Thur</option>
    <option value="Fri">Fri</option>
    <option value="Sat">Sat</option>
    <option value="Sun">Sun</option>
</select>
<select id="session-time"  class="update-cost">
    <option value="11 am">11 am</option>
    <option value="12 pm">12 pm</option>
    <option value="1 pm">1 pm</option>
    <option value="2 pm">2 pm</option>
    <option value="3 pm">3 pm</option>
    <option value="4 pm">4 pm</option>
    <option value="5 pm">5 pm</option>
</select>
<table id="tickets">
    <tr>
        <th class="first_column">Ticket Type</th>
        <th class="quantity_select">Quantity</th>
        <th class="column">Subtotal Price</th>
    </tr>
    <tr>
        <td class="first_column" name="SA">Adult</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="adult">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="SP">Concession</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="consession">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="SC">Child</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="child">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="FA">First Class Adult</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="firstClassAdult">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="FC">First Class Child</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="firstClassChild">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B1">Beanbag - 1 Person</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B2">Beanbag - 2 People</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B3">Beanbag - 3 Children</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="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 class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td>Total Price:</td>
        <td id="total_price">$xx.xx</td>
    </tr>

Thank you very much. I know I should show my attempt and usually i would but this was something i needed but don't know enough javascript to do. Really appreciate it thought — danielb, Oct 15 '15 at 05:00

Update text based off select option, multiplied by ticket price

1 Answers1