javascript realtime calculatie

nuet · ma 16 mrt 2015

ik heb nav een voorbeeldscript de inhoud gewijzigd en wat extra features toegevoegd voor een realtime calculatie met javascript.
Zonodig, geef maar feedback hierover:

DEMO


/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html

You are free to use the code in Commercial or non-commercial projects
*/

 //Opzetten associatieve arrays; we gebruiken deze arrays voor de selectie die de gebruiker maakt
 //De keys representeren het type moederbord, processor, hoeveelheid geheugen, merk videokaart, merk voeding en als laatste het aantal van de gekozen hd's
 //De value representeert de prijs van bijv. het moederbord bijv. Asus moederbord is 100 euro, Gigabyte moederbord is 120 euro, etc...
 // Voor de Multiply vertegenwoordigen de values het aantal dat gekozen is
 
 /* MOEDERBORD ARRAY */
 var moederbord_prijzen= new Array();
 moederbord_prijzen["geen"]=0;
 moederbord_prijzen["asus"]=100;
 moederbord_prijzen["gigabyte"]=120;
 moederbord_prijzen["asrock"]=140;
 moederbord_prijzen["msi"]=150;
 moederbord_prijzen["intel"]=90;

/* PROCESSOR ARRAY */
 var processor_prijzen= new Array();
 processor_prijzen["geen"]=0;
 processor_prijzen["celeron"]=95;
 processor_prijzen["i3"]=125;
 processor_prijzen["i5"]=155;
 processor_prijzen["i7"]=195;
 processor_prijzen["xeon"]=250;

/* GEHEUGEN ARRAY */ 
  var geheugen_prijzen= new Array();
 geheugen_prijzen["geen"]=0;
 geheugen_prijzen["1gb"]=75;
 geheugen_prijzen["2gb"]=95;
 geheugen_prijzen["4gb"]=125;
 geheugen_prijzen["8gb"]=155;

 /* VIDEOKAART ARRAY */
 var videokaart_prijs = new Array();
 videokaart_prijs["nvidia"]=160;
 videokaart_prijs["amd"]=130;
 
  /* VOEDING ARRAY */
 var voeding_prijs = new Array();
 voeding_prijs["500watt"]=75;
 voeding_prijs["620watt"]=95;
 voeding_prijs["750watt"]=110;
 voeding_prijs["1000watt"]=150;
 
 /**
  HIERONDER DE MULTIPLYS VOOR DE 4 HD'S
 **/
 /* MULTIPLY ARRAY voor de 500gb */
 var multiply_factor500gb= new Array();
 multiply_factor500gb["geen"]=1; // merk op dat als er geen aantal is ingevuld, de hd minimaal met 1 vermenigvuldigd wordt, anders zou ie wel eens gratis kunnen zijn 
 multiply_factor500gb["1_500gb"]=1;
 multiply_factor500gb["2_500gb"]=2;
 multiply_factor500gb["3_500gb"]=3;
 multiply_factor500gb["5_500gb"]=5;
 
 /* MULTIPLY ARRAY voor de 1tb*/
 var multiply_factor1tb= new Array();
 multiply_factor1tb["geen"]=1;
 multiply_factor1tb["1_1tb"]=1;
 multiply_factor1tb["2_1tb"]=2;
 multiply_factor1tb["3_1tb"]=3;
 multiply_factor1tb["5_1tb"]=5;
 
 /* MULTIPLY ARRAY voor de 2tb*/
 var multiply_factor2tb= new Array();
 multiply_factor2tb["geen"]=1;
 multiply_factor2tb["1_2tb"]=1;
 multiply_factor2tb["2_2tb"]=2;
 multiply_factor2tb["3_2tb"]=3;
 multiply_factor2tb["5_2tb"]=5;
 
 /* MULTIPLY ARRAY voor de 4tb*/
 var multiply_factor4tb= new Array();
 multiply_factor4tb["geen"]=1;
 multiply_factor4tb["1_4tb"]=1;
 multiply_factor4tb["2_4tb"]=2;
 multiply_factor4tb["3_4tb"]=3;
 multiply_factor4tb["5_4tb"]=5;


/* VIDEOKAART FUNCTIE */
// We lezen de selectie van de radio die de gebruiker heeft aangeklikt
function getVideokaartPrijs()
{  
    var Videokaart=0;
    //We refereren naar de form met id "computerform"
    var Form = document.forms["computerform"];
    //Get a reference to the cake the user Chooses name=selectedVideokaart":
    var selectedVideokaart = Form.elements["selectedvideokaart"];
    //Omdat er 2 radio buttons zijn; selectedVideokaart.length = 2
    //We lopen door de 2 radios
    for(var i = 0; i < selectedVideokaart.length; i++)
    {
        //als de radio van Videokaart is checked
        if(selectedVideokaart[i].checked)
        {
            //de Videokaart krijgt nu de waarde van de geselecteerde radio button; zie de array voor de prijswaarde
            Videokaart = videokaart_prijs[selectedVideokaart[i].value];
            //Als we een match hebben dan verlaten we de loop; we hoeven dan niet verder te gaan want we hebben reeds een match
            break;
        }
    }
    //return de Videokaart
    return Videokaart;
}

/* VOEDING FUNCTIE */
function getVoedingPrijs()
{  
    var Voeding=0;
    
    var Form = document.forms["computerform"];
    
    var selectedVoeding = Form.elements["selectedvoeding"];
    //Omdat er 4 radio buttons zijn; selectedVideokaart.length = 4
    
    for(var i = 0; i < selectedVoeding.length; i++)
    {
        //als de radio van Voeding is checked
        if(selectedVoeding[i].checked)
        {
            Voeding = voeding_prijs[selectedVoeding[i].value];
            break;
        }
    }
    //return Voeding
    return Voeding;
}

/* MOEDERBORD FUNCTIE*/
function getMoederbordPrijs()
{
    var MoederbordPrijs=0;
    //Refereren wederom naar de form met id="computerform"
    var Form = document.forms["computerform"];
    //Refereer naar de selectbox met id="moederbord"
     var selectedMoederbord = Form.elements["moederbord"];
     
    //We maken de Moederbordprijs gelijk aan de waarde die gekozen is; zie array hierboven voor waardes
    MoederbordPrijs = moederbord_prijzen[selectedMoederbord.value];

    //return de MoederbordPrijs
    return MoederbordPrijs;
}

/* PROCESSOR FUNCTIE*/
function getProcessorPrijs()
{
    var ProcessorPrijs=0;
    var Form = document.forms["computerform"];
    var selectedProcessor = Form.elements["processor"];
     
    ProcessorPrijs = processor_prijzen[selectedProcessor.value];

    return ProcessorPrijs;
}

/* GEHEUGEN FUNCTIE*/
function getGeheugenPrijs()
{
    var GeheugenPrijs=0;
    var Form = document.forms["computerform"];
    var selectedGeheugen = Form.elements["geheugen"];
     
    GeheugenPrijs = geheugen_prijzen[selectedGeheugen.value];

    return GeheugenPrijs;
}

/* MULTIPLY FUNCTIE VOOR 500gb*/
// we gaan deze 4 Multiply functies hieronder gebruiken voor de hd prijs ermee te vermenigvuldigen die later aan de orde komt
function getMultiplyFactor500gb()
{
    var MultiplyFactor500gb=0;
    var Form = document.forms["computerform"];
    var selectedMultiply500gb = Form.elements["aantal_hd_500gb"];
     
    MultiplyFactor500gb = multiply_factor500gb[selectedMultiply500gb.value];

    return MultiplyFactor500gb;
}

/* MULTIPLY FUNCTIE VOOR 1tb*/
function getMultiplyFactor1tb()
{
    var MultiplyFactor1tb=0;
    var Form = document.forms["computerform"];
    var selectedMultiply1tb = Form.elements["aantal_hd_1tb"];
     
    MultiplyFactor1tb = multiply_factor1tb[selectedMultiply1tb.value];

    return MultiplyFactor1tb;
}

/* MULTIPLY FUNCTIE VOOR 2tb*/
function getMultiplyFactor2tb()
{
    var MultiplyFactor2tb=0;
    var Form = document.forms["computerform"];
    var selectedMultiply2tb = Form.elements["aantal_hd_2tb"];
     
    MultiplyFactor2tb = multiply_factor2tb[selectedMultiply2tb.value];

    return MultiplyFactor2tb;
}

/* MULTIPLY FUNCTIE VOOR 4tb*/
function getMultiplyFactor4tb()
{
    var MultiplyFactor4tb=0;
    var Form = document.forms["computerform"];
    var selectedMultiply4tb = Form.elements["aantal_hd_4tb"];
     
    MultiplyFactor4tb = multiply_factor4tb[selectedMultiply4tb.value];

    return MultiplyFactor4tb;
}

/* HD FUNCTIE */
//uitlezen van de HD prijs op basis van de selected checkbox
function HDPrijs()
{
    var hdtotaal=0;
    var hd500gb=0;
    var hd1tb=0;
    var hd2tb=0;
    var hd4tb=0;
    
    
    //Refereer naar de form met id="computerform"
    var Form = document.forms["computerform"];
    //Refereer naar de checkbox met id="500gb", "1tb", "2tb", en "4tb"
    var Vijfhonderd = Form.elements["500gb"];
    var Duizend = Form.elements["1tb"];
    var Tweeduizend = Form.elements["2tb"];
    var Vierduizend = Form.elements["4tb"];

    //Als checkbox is checked, lees elke hdprijs uit
    if(Vijfhonderd.checked==true)
    {
	// hd500gb kost 50; we vermenigvuldigen deze met het aantal dat gekozen is door de functie getMultiplyfactor500gb() aan te roepen
        hd500gb=50*getMultiplyFactor500gb();
    }
    if(Duizend.checked==true)
    {
	// hd1tb kost 100; ook hier weer vermenigvuldigen met de Mutliply functie voor deze hd die het aantal bevat
        hd1tb=100*getMultiplyFactor1tb();
    }
    if(Tweeduizend.checked==true)
    {
        hd2tb=130*getMultiplyFactor2tb();
    }
    if(Vierduizend.checked==true)
    {
        hd4tb=180*getMultiplyFactor4tb();
    }
    
    // we tellen alles bij mekaar op; hdtotaal bevat de totale prijs van alle hd's die zijn gekozen met eventueel ook nog vermenigvuldigd met het aantal van de gekozen hd's
    var hdtotaal = hd500gb + hd1tb + hd2tb + hd4tb;
    
    //tot slot, return hdtotaal
    return hdtotaal;
}

function BezorgenPrijs()
{
    var BezorgingsPrijs=0;
    
    var Form = document.forms["computerform"];
    
    var includeBezorging = Form.elements["bezorging"];
    //Als de checkbox is aangevinkt; koppel BezorgingsPrijs aan 15 euro
    if(includeBezorging.checked==true){
        BezorgingsPrijs=15; // bezorgen kost 15 euro
    }
     
    return BezorgingsPrijs;
}
        
function TotaalPrijs()
{
    
    //Elke functie bezit(returns) een waarde, we "callen" de functies hieronder en tellen ze bij elkaar op voor de ComputerPrijs 
    var ComputerPrijs = getMoederbordPrijs() + getProcessorPrijs() + getGeheugenPrijs() + HDPrijs() + getVideokaartPrijs() + getVoedingPrijs() +  BezorgenPrijs();
    
    //resultaat weergeven met innerHTML in de div met id="totaalprijs"
    var divobj = document.getElementById('totaalprijs');
    divobj.style.display='block';
    divobj.innerHTML = "Totaalprijs: &euro;" + ComputerPrijs;

}

// als er nog niets is aangeklikt verbergen we de div
function hideTotaal()
{
    var divobj = document.getElementById('totaalprijs');
    divobj.style.display='none';
}

Erwin · ma 16 mrt 2015

Ik snap de context en het doel niet helemaal...

Dit kan volgens mij sowieso een stuk makkelijker.

nuet · ma 16 mrt 2015

Ja het doel is eigenlijk dat mensen gelijk kunnen zien tot hoe hoog de prijs oploopt, zonder eerst op submit te moeten drukken. Maar gooi maar een balletje op als dit efficienter kan
Hier staat de origineel trouwens: http://www.javascript-coder.com/files/calculation/cakeform.html

nuet · za 11 apr 2015

Het kan idd wat eenvoudiger zoals Erwin al opperde.
Voorbeeld formulier met realtime calculatie: DEMO


 $(document).ready(function () {
    var form = $('.bestelformulier'),
        elements = form.find('[data-price], [type="radio"], [type="checkbox"], select'),
        totalEl = $('.totaalprijs');
        

    //function to calculate total
    var calculateTotal = function () {
        var total = 0;

        $.each(elements, function () {
            var field = $(this),
                newVal;

            // switch type
            switch (field.prop('type')) {
                case 'select-one':
                    newVal = field.find(':selected').val() || 0;
                    break;
                case 'text':
                    newVal = parseFloat(field.val() || 0) * field.data('price');
                    field.closest('td').next().find('span').text(newVal);
                    break;
                case 'radio':
                    newVal = this.checked ? field.val() : 0;
                    break;
                case 'checkbox':
                    newVal = this.checked ? field.val() : 0;
                    break;
            }

            newVal = parseFloat(newVal);
            total += newVal;
        });

        totalEl.text(total.toFixed(2)); // afronden op 2 decimalen
    };

    // bind events
    elements.on('change keyup', calculateTotal);
       
});


Mozilla:
Crome:
Opera:
IE:
Safari:

javascript realtime calculatie

Reacties