Combine multiple input prices to one TOTAL

Question

So the script starts with an initial value $8.90 and the idea is to add a extra fee depending on the options that are selected, the HTML is divided by 3 sections 1.check-boxes, 2.Select and 3.input(text).

Each section works independently and I'm trying to find a way to combine all 3 sections so the TOTAL can show the final result depending on the options that were selected.

LIVE EXAMPLE

JQUERY:

$(document).ready( function() {

<!-- COUNTRY OPTIONS SCRIPT -->     
$('#country').on('keyup change', function(e){

        //Changed the following line to get the original value      
        var subt_value = $('#subt0').attr('data-original');

        //Changed this to say, NOT AR and has a choice per the comments.            
        if($(this).val() != 'AR' && $(this).val().length > 0) {
          var add_sub = parseFloat(subt_value)+parseFloat('10.00');
          $('#subt0').text(parseFloat(add_sub).toFixed(2));
        } else {
          //Otherwise put it back to the original value
          $('#subt0').text(subt_value);
        }

}); 
<!-- END COUNTRY OPTIONS SCRIPT --> 

<!-- CHECKBOX OPTIONS SCRIPT --> 
var start_price = parseFloat($('#subt0').attr('data-original'));

    $("#ser1, #ser2").click(function(){
        var amountToAdd = 0.0;
        $("#ser1, #ser2").each(function() {
            if($(this).is(":checked")){
                amountToAdd += parseFloat($(this).attr('data-price'));
            }
        });
        $('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
   });              
<!-- END CHECKBOX OPTIONS SCRIPT -->    

<!-- INPUT OPTIONS SCRIPT --> 
$(".opts").click(function() {
    var amountToAdd = 0.0;
    $(this).each(function() {
        $("#map_sector").val($(this).attr('data-price'));
        amountToAdd += parseFloat($(this).attr('data-price'));
    });     
    $('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
});
<!-- END INPUT OPTIONS SCRIPT --> 

});

HTML:

<input name="service1" type="checkbox" id="ser1" data-price="1" value="1" title="Service 1" />
<input name="service2" type="checkbox" id="ser2" data-price="5" value="1" title="Service 2" />

<select id="country">
  <option value="AR">Argentina</option>
  <option value="US">USA</option>
  <option value="BR">Brasil</option>
  <option value="CU">Cuba</option>
</select> 

<input name="map_sector" type="text" id="map_sector" value="5" readonly>

<label class="opts" data-price="1">Option #1</label>
<label class="opts" data-price="5">Option #2</label>
<label class="opts" data-price="8">Option #3</label>
<div>TOTAL: <label id="subt0" data-original="8.90">8.90</label></div>

LOOKING FOR THIS RESULT:

If 2 check-boxes selected: $14.90 + Option (USA) selected: $10.00 + Option#2 selected: $5.00: TOTAL: $29.90

Answer 1

I will divide the logic into two parts to make things manageable and easy to understand. Elements that are involved in price update would all have data-price so we can pick it up Elements on click would just place a class on all selected elements and if needed remove class from other elements where switch is needed. A single function to calculate price. Please see this http://jsfiddle.net/farrukhsubhani/Q2XVw/2/

function CalculateTotalPrice() {
var totalPrice = 0.0;
$(".priceitem").each(function(){
    totalPrice += parseFloat($(this).attr("data-price"));
});
$("#subt0").html("$" + totalPrice);
}

I have changed your html and js to make things work.

Answer 2

I would use AJAX to 'submit' the form to a PHP script that would calc the price and return it as a result. You use AJAX to prevent the default submit and then POST to the form to the PHP page. Use isset() to check the different options and based on either the isset() or the value of the POST variable modify a variable, and then echo that variable at the end of the PHP.

EDIT: IGNORE THE FIRST PART.

This should work for the select and the checkboxes, im not sure how you are handling the labels.

<script>
    //ASSIGN CLASSES TO EACH TYPE OF INPUT I.E. <input name="service1" type="checkbox" class="serviceCheckbox" id="ser1" data-price="1" value="1" title="Service 1" />
    //ALSO ASSIGN data-price TO SELECT ELEMENTS ( even if it is 0 )
    window.originalCost = 8.90; //window is how you explicitly assign global variables.
    window.cost = originalCost;

    $( document ).on( 'click', '.serviceCheckbox', function()
    {
        var thisCost = $( this ).attr( 'data-price' );

        if ( $( this ).prop( 'selected' ) == true )
        {
            addCost( thisCost );    
        }
        else 
        {
            subractCost( thisCost );    
        }
    });

    $( document ).ready( function()
    {
        var previousCost;
        var currentCost;

        $( document ).on( 'focus', '#country', function()
        {
            previousCost = $( this ).attr( 'data-price' );
        });

        $( document ).on( 'change', '#country', function()
        {
            currentCost = $( this ).attr( 'data-price' );

            var priceChange = currentCost*1 - previousCost*1;

            if ( priceChange > 0 )
            {
                addCost( priceChange ); 
            }
            else
            {
                subtractCost( priceChange );    
            }
        });     
    });

    function addCost( cost )
    {
        var currentCost = window.cost;
        var finalCost;

        cost = parseFloat( cost );

        finalCost = window.cost*1 + cost*1;

        window.cost = finalCost;
    }

    function subractCost( cost )
    {
        var currentCost = window.cost;
        var finalCost;

        cost = parseFloat( cost );

        finalCost = window.cost*1 - cost*1;

        window.cost = finalCost;
    }
</script>

and then you would have to translate the window.cost variable into the text for the label. Let me know if this works ( might need minor tweaking ) but I believe the logic is sound.