realtime berekenen

    Ik ben voor mijn facturatie opzoek naar een manier om mijn berekeningen live te zien gebeuren. De bedoeling is dat alles van wat ik invul in mijn formulier dat het direct al de uitkomst toont zonder de pagina de vernieuwen. hoe kan ik ervoor zorgen dat ik met ajax of javascript dit kan doen?


    Ik heb nu dus enkele velden waar je het bedrag moet invullen en het aantal. daarnaast moet er een onwijzigbaar input field komen met de uitkomst.
    op het einde van de rij moet er een totaal uitkomen van alle lijnen. En moet er nog een veld zijn waarin hij de btw apart rekent en als laatst de uitkomst. even een schets van wat ik nu heb:


    OmschrijvingEx BTWAantalUitkomst
    omschrijving 10,99010,990
    omschrijving 22,55025,100
    omschrijving 33,21013,210
    UitkomstEX BTW9.300
    BTW1,953
    Totaal11,253


    Zoals je ziet zou ik graag alles dat schuin en onderlijnd is automatisch direct laten rekenen. Dit moet in een input veld zijn, maar mag niet door mij gewijzigd kunnen worden. enkel door de berekening ervoor.


    Heeft er iemand een idee waar ik dit kan vinden? Of iemand die mij opweg kan helpen?
    Ik ben niet zo goed in Javascript of ajax. Liefst zou ik het willen met ajax

    Het niet wijzigen raad ik aan de readonly="true" te gebruiken, deze wordt wel gestuurd maar is niet wijzigbaar.


    Met Ajax is dit zeker mogelijk je zou dit via jQuery al kunnen doen maar met een Ajax request kan je bijvoorbeeld zeggen dat hij alleen moet sturen als de aantal is ingevuld. Hiermee gaat de berekening eigenlijk pas op het moment als die aanwezig is en door de gebruiker is aangevuld.


    JavaScript
    $.post('locatie/naar/calculatie.php', function( data ){ 
	$('.resultaat').html( data ); 
});

    Meer informatie hierover vind je op de website van jQuery

    Je hoeft hier geen ajax request voor te creëren. Gewoon simpele JS/jQuery code die de waardes pakt en ze met elkaar vermenigvuldigd. Ik kan een voorbeeldje maken. Maar dan is het wel handig om de HTML structuur te weten die je nu gebruikt.

    Citaat van D.Oomens

    Maar dan is het wel handig om de HTML structuur te weten die je nu gebruikt.

    Als daar enige structuur in zit (bijvoorbeeld door gebruikmaking van classes die specifiek voor de javascript worden gebruikt) dan kan dat je rekenwerk inderdaad vergemakkelijken.


    In wezen heb je maar twee berekeningen/handelingen nodig:
    - een berekening die een vermenigvuldiging in een rij uitvoert (productprijs x aantal)
    - een berekening die de totalen in de laatste kolom optelt (en na afloop hier BTW over berekent)


    Dit zou je nog kunnen vereenvoudigen door in de loop die de rijen doorloopt het tussenresultaat te onthouden zodat je deze handelingen in elkaar schuift.


    Let er wel op dat het decimaal scheidingsteken normaal een punt is, en geen komma.


    Ook zul je in moeten haken op wijzigingen zodat het bovenstaande verhaal opnieuw uitgevoerd wordt op het moment dat er een wijziging / toevoeging is.


    Zo, nu heb je min of meer een functionele spec, nu is het slechts een kwestie van code kloppen :p.

    Citaat van D.Oomens

    Je hoeft hier geen ajax request voor te creëren. Gewoon simpele JS/jQuery code die de waardes pakt en ze met elkaar vermenigvuldigd. Ik kan een voorbeeldje maken. Maar dan is het wel handig om de HTML structuur te weten die je nu gebruikt.

    Dom van mij dat ik daar nog niet aan gedacht heb. Bedankt alvast voor 'de voorzet" Ik zal eens zoeken in Google of ik enkele voorbeelden kan vinden. Als je mij opweg kan helpen, kan ik het zelf implanteren in mijn HTML. Kan je mij eventueel een voorbeeld geven?



    Citaat van FangorN

    In wezen heb je maar twee berekeningen/handelingen nodig:
    - een berekening die een vermenigvuldiging in een rij uitvoert (productprijs x aantal)
    - een berekening die de totalen in de laatste kolom optelt (en na afloop hier BTW over berekent)

    Zover was ik namelijk ook ;)


    Citaat van FangorN

    Let er wel op dat het decimaal scheidingsteken normaal een punt is, en geen komma.

    Dat is mijn fout, ik heb te weinig informatie gegeven. In mijn voorbeeld staat het getal met een komma, maar die wordt omgezet naar een punt. Het maakt in mijn structuur niet uit of het een punt of komma is. Dus zou daar ook mee moeten rekening gehouden worden.


    Citaat van FangorN

    Zo, nu heb je min of meer een functionele spec, nu is het slechts een kwestie van code kloppen :p.

    Help je mij hier dan even bij? Of geef je enkel maar commentaar? :)

    Oke gebasseerd op de code van @D.Oomens .
    Heb wat dingen toegevoegd en wat dingen aangepast.
    Eerste keer dat ik werk op de manier van D.Oomens dus hoop dat ik het allemaal goed heb toegepast. Verbeteringen zijn welkom.
    https://jsfiddle.net/MOnkNL/7bs6e7h1/


    Ik heb afrondingen toegevoegd in voordeel van de 'klant'.
    Als je volledige bedragen wil moet je regel 2 van javascript aanpassen.
    Dus


    JavaScript
    var output = (Math.floor((this * 100)) / 100).toFixed(2).replace('.', ',');

    vervangen voor



    JavaScript
    var output = this.toString().replace('.', ',');

    Natuurlijk wil ik dit:
    Gezien vandaag ook sint gevierd moet worden heb ik een snelle oplossing voor je gebouwd nog steeds groten deels gebaseerd op de code van @D.Oomens.


    De aanpassing is eigenlijk erg simpel inplaats van de .text() op te halen uit de td .price.
    Haal je nu de value op van de input .price.


    Daarnaast heb ik op evenement keyup aangezet dat hij dan de berekening uit gaat voeren.
    Voor de leukigheid heb ik nu ook nog toegevoegd dat je een rij kan toevoegen. (Dit zal ik later iets uitbreiden maar zoals ik al zei moet ook nog sint vieren vandaag).


    Preview en code:
    http://ict.thomasvv.nl/24135-autocal/exbtw.html

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login