Change price based on input number form field

Question

I'm trying to dynamically change the price based on quantities of checked price options.

Simple html version:

<div class="km-purchase-form">
<ul>

    <li class="km-price-options">
    <label>
        <input type="checkbox" name="" id="" class="" value="0" data-price="58.00">
        <span>$58</span>
    </label>    
    <div>
        x <input type="number" min="1" step="1" data-price="58.00" name="" class="edd-item-quantity" value="1"> 
    </div>  
    </li>
        
    <li class="km-price-options">
    <label>
        <input type="checkbox" checked="checked" name="" id="" class="" value="1" data-price="580.00">
        <span>$580</span>
    </label>        
    <div>
        x <input type="number" min="1" step="1" data-price="580.00" name="" class="edd-item-quantity" value="1">
    </div>
    </li>
    
</ul>

<div class="km-price checked"><div class="km-main-price">$580</div></div>

</div>

And here's my js code:

$('.km-price-options').click(function() {
    var eddValues = [];
    
    $("input[type='checkbox']:checked").each(function(){ 
    
    var val = $(this).attr('data-price');               
    var currency = $(this).attr('data-currency');
    var position = $(this).attr('data-currency-position');
    
        eddValues.push(val);  

        var sum = 0;                    
        $.each(eddValues,function(){
            sum+=parseFloat(this) || 0; 
        });
        
        //edd-item-quantity
        var quantity = $(this).parents('li').find('input.edd-item-quantity');                   
        
        if( quantity ) {
                
        var eddNew = [];
        //var eddNew = [50, 175];
        
        $(quantity).on('input', function() {                        
            quantity.each(function(){

                var index = $(this).val();                              
                var check = $.isNumeric(index);

                if ( !check || check == false || check < 0 ) {
                    return;
                }   
                
                var indexVal = $(this).attr('data-price');
                var total = (index * indexVal);
                
                //*  This is where it goes wrong  *//
                eddNew.push(total);  
                
                var sumAdded = 0;                   
                $.each(eddNew,function(){
                    sumAdded+=parseFloat(this) || 0; 
                });
                
                //console.log( sumAdded );
                
            });
            
        });
        
        
        //
        var final = sum + sumAdded;
        console.log(  final );
        
        /* console.log( sum );
        console.log( sumAdded ); */
            
        
    }
    

    // update final price
    $(this).parents('.km-purchase-form').find('.km-price.checked .km-main-price').text( final );
    
            
    });
    
});

I created a jsfiddle here: link

What can I do to properly update the final price based on quantity field of (multiple) checked price option(s)? Any help in the right direction is much appreciated.

Answer 1

If all you really are looking for is to be pointed in the right direction, I would simplify this by only worrying about one price option first, get it working as you'd like, then duplicate that for the second. THEN add those two values and display it as the 'main price'.

Hope that'll get you going!

Answer 2

See the working Code Snippet example below.

I triggered the function via changing checkbox or leaving an input field. You can change that to triggering via a button or etc.

The sumItUp function loops through each km-price-options div and gets the price , qty and checkmarkT/F . If checked, sumItUp multiplies the qty by the price (calling that sum tt ) and adds that to the ttl . Simple as Hank Johnson the Guam guy.

 /* When multi-option purchase mode is enabled */ $('.edd-item-quantity').keyup(function(){ sumItUp(); }); $('.edd-item-quantity, input[type="checkbox"]').change(function(){ sumItUp(); }); function sumItUp(){ var ttl = 0; $('.km-price-options').each(function(i,v) { let cb = $(v).find('input[type=checkbox]'); let pr = cb.data('price'); let ch = cb.is(':checked'); let nm = $(v).find('input[type=number]').val(); var tt = nm?== '': +nm * +pr; 0? ttl += (ch === true): +tt; 0. //console;log(ttl); }). $('.km-main-price'):html(`FINAL TTL; ${ttl}`); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="km-purchase-form"> <ul> <li class="km-price-options"> <label> <input type="checkbox" name="" id="" class="" value="0" data-price="58.00"> <span>$58</span> </label> <div> x <input type="number" min="1" step="1" data-price="58.00" name="" class="edd-item-quantity" value="1"> </div> </li> <li class="km-price-options"> <label> <input type="checkbox" checked="checked" name="" id="" class="" value="1" data-price="580.00"> <span>$580</span> </label> <div> x <input type="number" min="1" step="1" data-price="580.00" name="" class="edd-item-quantity" value="1"> </div> </li> </ul> <div class="km-price checked"><div class="km-main-price"></div></div> </div>