Diglabs example multi tickets

by riverguy

HTML

<div class="stripe-payment-form-row">
    <label>Ticket Type 1</label>
    <select name="package" id="package">
        <option value="A" data-amount="700" data-options="#packageA">Package A - $7</option>
        <option value="B" data-amount="1400" data-options="#packageB">Package B - $14</option>
    </select>
</div>
<div class="stripe-payment-form-row">
    <label>Ticket Type 2</label>
    <select name="alternate" id="alternate">
        <option value="A" data-amount="800" data-options="#alternateA">Package C - $8</option>
        <option value="B" data-amount="1600" data-options="#alternateB">Package D - $16</option>
    </select>
</div>    
<div class="stripe-payment-form-row">
    <label>Discount</label>
    <select name="discount" id="discount">
         <option value="A" data-amount="1" data-options="#discountZ">discount 0%</option>
         <option value="A" data-amount="0.9" data-options="#discountA">discount 10%</option>
        <option value="B" data-amount=".5" data-options="#alternateB">discount 50%</option>
    </select>    
</div>
<div class="stripe-payment-form-row">
    <input id='amount' type="hidden" class="amount" size="20" name="amount" value="4000"/>
    <label>Total Amount</label>
    <input id='amountShown' type="text" size="20" disabled="disabled" class="disabled amountShown required" value="40.00" />
    <span class="stripe-payment-form-error"></span>
</div>

CSS

.stripe-payment-form-row {
    margin: 5px 0;
}
.stripe-payment-form-row label{
    display: block;
    float: left;
    width: 100px;
}

JavaScript

(function($){
    $(document).ready(function(){
        $('#package').change(function(){
            /*var option = $(this).find(':selected');
            var sel = option.data('options');
            $('.options').hide();
            $(sel).show();*/
            calculateTotal();
        });
        
        $('#alternate').change(function(){
            /* var option = $(this).find(':selected');
            var sel = option.data('options');
            $('.options').hide();
            $(sel).show();*/
            calculateTotal();
        });
        
        $('#discount').change(function(){
            /* var option = $(this).find(':selected');
            var sel = option.data('options');
            $('.options').hide();
            $(sel).show();*/
            calculateTotal();
        });
        
        /* $('.options input[type=checkbox]').change(function(){
           calculateTotal(); 
        }); */
        
        calculateTotal();
    });
    
    function calculateTotal(){
        var base = $('#package').find(':selected').data('amount');
        var alt = $('#alternate').find(':selected').data('amount');
        var disc = $('#discount').find(':selected').data('amount');
        var visibleOptions = $('.options:visible');
        var checkedOptions = visibleOptions.find('input:checked');
        var options = 0;
        checkedOptions.each(function(){
             options += $(this).data('amount');
        });
        
        var totalCents = parseInt( (base + alt) * disc);
        $('#amount').val(totalCents);
        var totalDollars = totalCents/100;
        $('#amountShown').val(totalDollars);
    }
})(jQuery);