SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wanting to add prices and clone, yet making a mess of things

    I'm a PHP guy who is finally getting his hands dirty with jQuery. I'm trying to replicate some of the functionality of this form (https://www.barracuda.com/purchase), specifically the part totaling up the amounts of the items selected, and being able to add another product by cloning the form.

    Up until this morning (before I added cloning) it was working perfectly, even though the jQuery is a bloated monster; full of replicated code. I'm basically doing this by hobbling bits and pieces together, as I'm not well-versed on creating and using functions in jQuery.

    Anyway, I need to get this to clone the form (which it does) AND add up the totals of ALL forms (which it doesn't). That last bit (the adding of the totals) is where I'm stuck. Any help would be much appreciated. Please, no flaming about the code, I know it's terrible. :P


    HTML Code:
    <form action="form.php" id="order" method="post">
        <table class="products" id="tbl_products" style="margin-bottom:0; padding-bottom:0">
            <tr>
                <th style="width:30%">Product</th>
                <th style="width:50%">Configuration</th>
                <th style="width:10%">&nbsp;</th>
                <th style="width:10%">&nbsp;</th>
            </tr>
        </table>
        <div id="order_container">
            <div id="fields_1">
                <table>
                    <tr>
                        <td>
                            <select name="product" class="product">
                                <option value="Product 1">Product 1 ($1000)</option>
                                <option value="Product 2">Product 2 ($2000)</option>
                                <option value="Product 3">Product 3 ($3000)</option>
                                <option value="Product 4">Product 4 (call)</option>
                                <option value="Product 5">Product 5 (call)</option>
                            </select>
                        </td>
                        <td>
                            <div id="prod1">
                                <label for="rep1tbdt"><input type="checkbox" name="rep1tbdt" class="rep1tbdt" id="rep1tbdt" value="Option 1: $100"> Option 1: $100</label><br>
                                <label for="upg1tbdt"><input type="checkbox" name="upg1tbdt" class="upg1tbdt" id="upg1tbdt" value="Option 2: $200"> Option 2: $200</label>
                            </div>
                            <div id="prod2" style="display:none">
                                <label for="rep1tbrm"><input type="checkbox" name="rep1tbrm" class="rep1tbrm" id="rep1tbrm" value="Option 1: $300"> Option 1: $300</label><br>
                                <label for="upg1tbrm"><input type="checkbox" name="upg1tbrm" class="upg1tbrm" id="upg1tbrm" value="Option 2: $400"> Option 2: $400</label>
                            </div>
                            <div id="prod3" style="display:none">
                                <label for="rep6tbrm"><input type="checkbox" name="rep6tbrm" class="rep6tbrm" id="rep6tbrm" value="Option 1: $500"> Option 1: $500</label><br>
                                <label for="upg6tbrm"><input type="checkbox" name="upg6tbrm" class="upg6tbrm" id="upg6tbrm" value="Option 2: $600"> Option 2: $600</label>
                            </div>
                            <div id="call-pricing" style="display:none">
                                <label>Call for pricing</label><br>
                                <label>&nbsp;</label>
                            </div>
                        </td>
                        <td><div id="total">$1000</div></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="add-button"><a href="#" class="add-item">add another product</a></div>
    </form>
    
    
    <table class="right" id="review_order"">
        <thead>
            <tr>
                <th style="padding-top:0"><h4>Item</h4></th>
                <th style="padding:0 20px 0 0; text-align:right"><h4>Price</h4></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td><h4>Order Total</h4></td>
                <td class="order_total" id="order_total"><h4>$1025</h4></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Product Total</td>
                <td class="item_total" id="product_total">$1000</td>
            </tr>
            <tr>
                <td>Shipping</td>
                <td class="item_total" id="shipping_total">$25</td>
            </tr>
            <tr>
                <td>Tax</td>
                <td class="item_total" id="tax_total"></td>
            </tr>
        </tbody>
    </table>
    
    
    <script>
    $(document).ready(function() {
    
    
        // set some defaults
        var product_name  = 'Product 1';
        var product_price = 1000;
        var shipping      = 25;
        var order_total   = product_price;
    
    
    // update pricing and uncheck checkboxes if changed
        $('.product').on('change', function() {
            
            var product_name = $(this).val();
            
            if(product_name == 'Product 1') {
                product_price = 1000;
                $('#call-pricing').hide();
                $('#product2').hide();
                $('#product3').hide();
                $('#product1').show();
            }
            if(product_name == 'Product 2') {
                product_price = 2000;
                $('#call-pricing').hide();
                $('#product1').hide();
                $('#product3').hide();
                $('#product2').show();
            }
            if(product_name == 'Product 3') {
                product_price = 3000;
                $('#call-pricing').hide();
                $('#product2').hide();
                $('#product1').hide();
                $('#product3').show();
            }
            if(product_name == 'Product 4' || product_name == 'Product 5') {
                product_price = 0;
                $('#product2').hide();
                $('#product1').hide();
                $('#product3').hide();
                $('#call-pricing').show();
            }
            
            // if switching between products. we want to uncheck the checkboxes so there are no surprises
            $('.rep1tbdt').prop('checked', false);
            $('.upg1tbdt').prop('checked', false);
            $('.rep1tbrm').prop('checked', false);
            $('.upg1tbrm').prop('checked', false);
            $('.rep6tbrm').prop('checked', false);
            $('.upg6tbrm').prop('checked', false);
            
            // update the total with the product price only
            $('#total').html('$' + product_price.toFixed(2));
            
            // display the product total
            $('#product_total').html('$' + product_price.toFixed(2) + '');
            
            if(product_price == 0) {
                $('#product_total').html('$0.00');
                $('#shipping_total').html('$0.00');
                $('#order_total').html('$0.00');
            } else {
                // calculate the order total
                var order_total = product_price + shipping;
            
                // display the order total
                $('#order_total').html('<h4>$' + order_total.toFixed(2) + '</h4>');
            }
        });
    
    
    // see if a checkbox is ticked
        $(':checkbox').on('change', function() {
            // set up our pricing
            var rep1tbdt = $('.rep1tbdt').prop('checked') ? 100 : 0;
            var upg1tbdt = $('.upg1tbdt').prop('checked') ? 200 : 0;
            var rep1tbrm = $('.rep1tbrm').prop('checked') ? 300 : 0;
            var upg1tbrm = $('.upg1tbrm').prop('checked') ? 400 : 0;
            var rep6tbrm = $('.rep6tbrm').prop('checked') ? 500 : 0;
            var upg6tbrm = $('.upg6tbrm').prop('checked') ? 600 : 0;
            
            // calculate the total with the product price and the checkbox price
            var total = product_price + rep1tbdt + upg1tbdt + rep1tbrm + upg1tbrm + rep6tbrm + upg6tbrm;
            
            // display the total (next to the products)
            $('#total').html('$' + total);
    
    
            // calculate the order total
            var order_total = total + shipping;
            
            // display the product total
            $('#product_total').html('$' + total.toFixed(2) + '');
            
            // display the order total
            $('#order_total').html('<h4>$' + order_total.toFixed(2) + '</h4>');
        });
        
        
    // add the item to the cart
        $('.add-item').click(function() {
        
    // CLONE THE FORM FIELDS
            var fields = $('#fields_1').clone().attr('id','fields_2'); 
            var inputs = fields.find('input');
            //inputs.each(function(i) {
            //    $(this).attr('class', 'field'+i+'_2');
            //});   
            fields.appendTo('#order_container');
            
            // get the value of each ticked checkbox
            var rep1tbdt = $('.rep1tbdt').prop('checked') ? 100 : '';
            var upg1tbdt = $('.upg1tbdt').prop('checked') ? 200 : '';
            var rep1tbrm = $('.rep1tbrm').prop('checked') ? 300 : '';
            var upg1tbrm = $('.upg1tbrm').prop('checked') ? 400 : '';
            var rep6tbrm = $('.rep6tbrm').prop('checked') ? 500 : '';
            var upg6tbrm = $('.upg6tbrm').prop('checked') ? 600 : '';
            
            // calculate the total with the product price and the checkbox price
            var order_total = product_price + rep1tbdt + upg1tbdt + rep1tbrm + upg1tbrm + rep6tbrm + upg6tbrm + shipping;
            
            // add each product to the data string
            var str_rep1tbdt = '';
            var str_upg1tbdt = '';
            var str_rep1tbrm = '';
            var str_upg1tbrm = '';
            var str_rep6tbrm = '';
            var str_upg6tbrm = '';
            
            if(rep1tbdt != 0) {
                var str_rep1tbdt = '&rep1tbdt';
            }
            if(upg1tbdt != 0) {
                var str_upg1tbdt = '&upg1tbdt';
            }
            if(rep1tbrm != 0) {
                var str_rep1tbrm = '&rep1tbrm';
            }
            if(upg1tbrm != 0) {
                var str_upg1tbrm = '&upg1tbrm';
            }
            if(rep6tbrm != 0) {
                var str_rep6tbrm = '&rep6tbrm';
            }
            if(upg6tbrm != 0) {
                var str_upg6tbrm = '&upg6tbrm';
            }
            
            var data = str_rep1tbdt + str_upg1tbdt + str_rep1tbrm + str_upg1tbrm + str_rep6tbrm + upg6tbrm;
            
            // put in the tax
            $('#tax_total').html('$' + product_price * 0.06.toFixed(2));
            
            $.ajax({
                type: 'GET',
                url: 'form.php',
                data: '&add=true' + data,
                cache: false,
                success: function(data){
                    
                }
            });
            return false;
        });
    });
    </script>

  2. #2
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. Instead of duplicating the form (which I didn't care for anyway) I stored the products in a SESSION and displayed that on the page as text. MUCH easier to keep track of and add to/delete from via ajax.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •