Do Calculations On Multiple Form Fields - jQuery AutoCalc

Status
Niet open voor verdere reacties.
A

aromijn99

Gebruiker
Lid geworden
9 sep 2013
Berichten
39
Hallo,

Ik probeer op mijn website de gebruiker een berekening te laten uitvoeren.
Het script van "Do Calculations On Multiple Form Fields - jQuery AutoCalc" (gevonden op internet) werkt prima.
https://www.jqueryscript.net/form/Do-Calculations-Form-Fields-AutoCalc.html
Kan het redelijk naar mijn hand zetten.
Alleen van html heb ik redelijke kennis. Met javascript en jquery probeer ik uit te komen door uit te proberen. Veel kaas heb ik dus niet van gegeten...

Mijn berekening zit er zo uit: https://www.camperparkdenhaag.nl/2020CPDH/tarieven.html
Waarschijnlijk ziet het er vreemd uit, die hoge bedragen maar ik heb gemerkt dat men anders niet alles invult (en ik krijg het niet voor elkaar om een melding erin te zetten indien ze iets niet invullen. Want in deze berekening schijn je de waarde niet leeg te mogen laten (?). Maar dat is een ander probleem.

Wat mij dwars zit is dat ik de decimale punt niet kan omzetten naar een komma, terwijl in de beschrijving staat dat er zou moeten kunnen.
Op internet heb ik van alles gevonden maar van die scriptjes snap ik helaas geen snars. Ik weet niet eens waar en hoe ik ze moet plaatsen.

Na 2 dagen van alles geprobeerd te hebben, ga ik het toch maar hier vragen: wat is er mis met mijn script? Alles werkt prima behalve die regels van decimalOpt en thousandopt...

Code: 
<script>
$(document).ready(function() {
    function autoCalcSetup() {
        $('form[name=cart]').jAutoCalc('destroy');
        $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
        $('form[name=cart]').jAutoCalc({decimalPlaces: 2});
        $('form[name=cart]').jAutoCalc({decimalOpts: [',', '.']});
        $('form[name=cart]').jAutoCalc({tousandOpts: ['.', ',']})
    }
    autoCalcSetup();
});
</script>
<!-- Deze is nodig voor de berekeningen in de tabel -->

Heeft iemand een idee hoe je dit kan uitleggen in normaal Nederlands? Alvast heel erg bedankt!

Groetjes, Astrid

mod. script in code tags gezet.
 
Laatst bewerkt door een moderator:
is het niet thousandOpts?
 
Scherp gezien :)
 
De "verplichte invoer" is slechts 1 woord, namelijk required . Als voorbeeld het hondje ;-)
Code: 
<select name="Hond-aantal" [B]required[/B]>
  <option [B]selected value=""[/B]>Vul in:</option>
  <option value="0">0 honden</option>
  <option value="1">1 hond</option>
  <option value="2">2 honden</option>
</select>

Er zit wel een bug in de html want "vul in" heeft value 0 en "0 honden" heeft ook value 0.
Dit kan je oplossen met <option selected value="">Vul in:</option> zodat required goed werkt.
 
Laatst bewerkt:
PHP4U: Bedankt, na de zoveelste keer erin zetten heb ik een typefout gemaakt. Maar de uitkomst is hetzelfde: werkt niet. Geen komma's bij decimalen, geen punten bij duizendtallen.

Edmoor: Bedankt?

Bron: Bedankt, maar zoals gezegd een leeg veld werkt niet in dit script. Zodra ik value="" opgeef krijg ik een foutmelding: foutmelding.jpg

Groetjes, Astrid
 
Bron: Bedankt, maar zoals gezegd een leeg veld werkt niet in dit script.
Klik om te vergroten...
Foutje van de maker ;) Juist omdat html5 met de value="" werkt bij een select zou dit ingebouwd moeten zijn.
Eigenlijk mag een NaN nooit verschijnen, het geeft min of meer aan dat het script niet idiot proof is.
 
Laatst bewerkt:
Bron: Bedankt. Ken je een beter script voor zo'n berekening? Misschien dat daarom ook die decimalen niet werken?

Groetjes, Astrid
 
Alvast dit voorbeeld op je vraag hierboven om EN/UK notatie om te zetten in NL notatie.
Code: 
var getal_js  = 3456.495;


// afronden op 2 decimalen. 3456.495 wordt 3456.5
getal_js = parseFloat((getal_js + 1e-10).toFixed(2));


// omzetten in NL notatie met 2 decimalen. 3456.5 wordt 3.456,50
var getal_nl = getal_js.toLocaleString('nl-NL', { minimumFractionDigits: 2 });

aanvulling: afronden op 2 decimalen als er teveel cijfers achter de komma staan.
 
Laatst bewerkt:
Hallo Bron,

Wederom bedankt. Ik denk alleen dat ik het op de verkeerde plek neergezet heb want het werkt niet.
Ik nam aan dat het in het script moest:
Code: 
<script>
$(document).ready(function() {
        function autoCalcSetup() {
            $('form[name=cart]').jAutoCalc('destroy');
            $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
            $('form[name=cart]').jAutoCalc({decimalPlaces: 2});
            var getal_nl = Hoogseizoen-aantal.toLocaleString('nl-NL', {minimumFractionDigits: 2}); // resultaat van getal_nl is dan een tekst 12.345,50
        }
        autoCalcSetup();
});
</script><!-- Deze is nodig voor de berekeningen in de tabel -->

Omdat ik aanneem dat ik zo alle variabele zo moet benoemen. Ik dacht dat Hoogseizoen-aantal een variabele was, klopt dat?
Stukje uit het formulier:

Code: 
<tr name="line_items">
    <td>Hoog seizoen  (exclusief&nbsp;personen)</td>
    <td class="pernacht">14.75</td>
    <td><select name="Hoogseizoen-aantal">
         <option value="0">0 nachten</option>
         <option value="1">1 nacht</option>
         <option value="2">2 nachten</option>
         <option value="3">3 nachten</option>
         <option value="4">4 nachten</option>
         <option value="5">5 nachten</option>
         <option value="6">6 nachten</option>
         <option value="7">7 nachten</option>
         <option selected value="0">Vul in:</option>
    </select></td>
    <td><input type="text" name="Item-subtotaal" value="" jAutoCalc="{Hoogseizoen-aantal} * 14.75"></td>
</tr>

mod. script in code tags gezet.
 
Laatst bewerkt door een moderator:
In het voorbeeld wat ze geven mag je met emptyAsZero: true ook een value="" gebruiken. Daardoor kan je de velden valideren met required zoals ik eerder bij #4 aangaf.
Als voorbeeld het stukje van de de honden. Dat komt er dan zo uit te zien.
Code: 
<tr name="line_items">
  <td>Hond (max. 2)</td>
  <td><select name="HondAantal" required style="width:100%">
    <option value="" selected>- keuze -</option>
    <option value="0">0 honden</option>
    <option value="1">1 hond</option>
    <option value="2">2 honden</option>
  </select></td>
  <td><input type="text" name="price" value="9,45"></td>
  <td>&nbsp;</td>
  <td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>

Het onderstaande moet éénmalig in de html komen te staan, de beste plek is ergens tussen</form> en </body>
Belangrijk is wel dat je al je huidige scripts van dit formulier uit je html haalt.
Code: 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Do-Calculations-Form-Fields-AutoCalc/dist/jautocalc.js"></script>

<script>
$(document).ready(function() {
  // zet het veld price als NL bedrag, bijv. 78,90

  function autoCalcSetup() {
    // oude resten verwijderen voor de setup
    $('form[name=cart]').jAutoCalc('destroy');
    // setup de invulvelden in line_items
    $('form[name=cart] tr[name=line_items]').jAutoCalc({
      thousandOpts: ['.'],
      decimalOpts: [','],
      decimalPlaces: 2,
      keyEventsFire: true,
      showParseError: true,
      emptyAsZero: true,
    });
    // setup overige velden
    $('form[name=cart]').jAutoCalc({
      thousandOpts: ['.'],
      decimalOpts: [','],
      decimalPlaces: 2
    });
  }
  // start de calculator
  autoCalcSetup();
});
</script>

Zet overal waar je zelf een bedrag invult een NL bedrag, bijv. 1.018,95 (dus niet 1018.95). AutoCalc snapt wat je bedoelt.

Het afronden op 2 decimalen (script in post #8) is niet nodig want AutoCalc doet dit voor je.
 
Laatst bewerkt:
Nog een dingetje in de naamgeving.
Ik zag dat je name="Hoogseizoen-aantal" gebruikt, dit kan worden opgevat als Hoogseizoen minus aantal
Je kan dit oplossen met een onderliggend streepje, bijvoorbeeld:
Code: 
<select name="Hoogseizoen_aantal">
<select name="Laagseizoen_aantal">

Maar je kan het ook zo oplossen:
Code: 
<select name="HoogseizoenAantal">
<select name="LaagseizoenAantal">
 
De tabel die je gebruikt heb ik in een test bestandje gezet.
Bij mij werkt het onderstaande goed.

Als je dit gaat proberen, maak dan vooraf een backup van de huidige pagina.

Bovenaan in de pagina vervang je alle jAutoCalc scripts door dit
Code: 
<!-- begin jAutoCalc voor berekeningen in de tabel -->
<script src="https://www.camperparkdenhaag.nl/Do-Calculations-Form-Fields-AutoCalc/dist/jautocalc.js"></script>
<script>
$(document).ready(function() {
    function autoCalcSetup() {
        // oude resten verwijderen voor de setup
        $('form[name=cart]').jAutoCalc('destroy');
        // setup de invulvelden in line_items
        $('form[name=cart] tr[name=line_items]').jAutoCalc({
            thousandOpts: ['.'],
            decimalOpts: [','],
            decimalPlaces: 2,
            keyEventsFire: true,
            showParseError: true,
            emptyAsZero: true,
        });
        // setup overige velden
        $('form[name=cart]').jAutoCalc({
            thousandOpts: ['.'],
            decimalOpts: [','],
            decimalPlaces: 2
        });
    }
    // start de calculator
    autoCalcSetup();
});
</script>
<!-- einde jAutoCalc voor berekeningen in de tabel -->

De tabel voor de berekening vervang je door de tabel hieronder.
Voor de NL bedrag notatie heb ik overal een <input type="hidden"> ertussen gezet.
Code: 
<!--begin reserveringstabel-->
<div>
<table id="cpdh" name="cart">

<tr>
    <th>Item</th>
    <th>Per nacht</th>
    <th>Aantal</th>
    <th>Item Totaal</th>
</tr>

<tr name="line_items">
    <td>Hoog seizoen  (exclusief personen)</td>
    <td class="pernacht">14,75
    <input value="14,75" name="Hoogseizoen_prijs" type="hidden"></td>
    <td><select name="Hoogseizoen_aantal" required>
        <option value="0">0 nachten</option>
        <option value="1">1 nacht</option>
        <option value="2">2 nachten</option>
        <option value="3">3 nachten</option>
        <option value="4">4 nachten</option>
        <option value="5">5 nachten</option>
        <option value="6">6 nachten</option>
        <option value="7">7 nachten</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input type="text" name="Item_subtotaal" value="" jAutoCalc="{Hoogseizoen_aantal} * {Hoogseizoen_prijs}"></td>
</tr>

<tr name="line_items">
    <td>Laag seizoen (exclusief personen)</td>
    <td class="pernacht">12,75
    <input value="12,75" name="Laagseizoen_prijs" type="hidden"></td>
    <td><select name="Laagseizoen_aantal">
        <option value="0">0 nachten</option>
        <option value="1">1 nacht</option>
        <option value="2">2 nachten</option>
        <option value="3">3 nachten</option>
        <option value="4">4 nachten</option>
        <option value="5">5 nachten</option>
        <option value="6">6 nachten</option>
        <option value="7">7 nachten</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input type="text" name="Item_subtotaal" value="" jAutoCalc="{Laagseizoen_aantal} * {Laagseizoen_prijs}"></td>
</tr>

<tr name="line_items">
    <td height="70">Stroom</td>
    <td  class="pernacht">2,95
    <input value="2,95" name="Stroom_prijs" type="hidden"></td>
    <td><select name="Stroom_aantal">
        <option value="0">0 nachten</option>
        <option value="1">1 nacht</option>
        <option value="2">2 nachten</option>
        <option value="3">3 nachten</option>
        <option value="4">4 nachten</option>
        <option value="5">5 nachten</option>
        <option value="6">6 nachten</option>
        <option value="7">7 nachten</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input type="text" name="Item_subtotaal" value="" jAutoCalc="{Stroom_aantal} * {Stroom_prijs}"></td>
</tr>

<tr name="line_items">
    <td>Personen ouder dan 12</td>
    <td class="pernacht">2,00
    <input value="2,00" name="Persoon_prijs" type="hidden"></td>
    <td><select name="Persoon_aantal">
        <option value="1">1 persoon</option>
        <option value="2">2 personen</option>
        <option value="3">3 personen</option>
        <option value="4">4 personen</option>
        <option value="5">5 personen</option>
        <option value="6">6 personen</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input jAutoCalc="({Hoogseizoen_aantal} * {Persoon_aantal} * {Persoon_prijs}) + ({Laagseizoen_aantal} * {Persoon_aantal} * {Persoon_prijs})" type="text" name="Item_subtotaal" value=""></td>
</tr>

<tr name="line_items">
    <td>Personen 4 t/m 12</td>
    <td class="pernacht">2,00
    <input value="2,00" name="Kinder_prijs" type="hidden"></td>
    <td><select name="Kinder_aantal">
        <option value="0">0 personen</option>
        <option value="1">1 persoon</option>
        <option value="2">2 personen</option>
        <option value="3">3 personen</option>
        <option value="4">4 personen</option>
        <option value="5">5 personen</option>
        <option value="6">6 personen</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input jAutoCalc="{Hoogseizoen_aantal} * {Kinder_aantal} * {Kinder_prijs} + {Laagseizoen_aantal} * {Kinder_aantal} * {Kinder_prijs}" type="text" name="Item_subtotaal" value=""></td>
</tr>

<tr name="line_items">
    <td>Personen 0 t/m 3</td>
    <td class="pernacht">0,00
    <input value="0,00" name="Baby_prijs" type="hidden"></td>
    <td><select name="Baby_aantal">
        <option value="0">0 personen</option>
        <option value="1">1 persoon</option>
        <option value="2">2 personen</option>
        <option value="3">3 personen</option>
        <option value="4">4 personen</option>
        <option value="5">5 personen</option>
        <option value="6">6 personen</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input jAutoCalc="{Hoogseizoen_aantal} * {Baby_aantal} * {Baby_prijs} + {Laagseizoen_aantal} * {Baby_aantal} * {Baby_prijs}" type="text" name="Item_subtotaal" value=""></td>
</tr>

<tr name="line_items">
    <td>Hond (max. 2)</td>
    <td class="pernacht">0,00
    <input value="0,00" name="Hond_prijs" type="hidden"></td>
    <td><select name="Hond_aantal">
        <option value="0">0 honden</option>
        <option value="1">1 hond</option>
        <option value="2">2 honden</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input type="text" name="Item_subtotaal" value="" jAutoCalc="{Hond_aantal} * {Hond_prijs}"></td>
</tr>

<tr name="line_items">
    <td>Extra voertuig (max. 1)</td>
    <td class="pernacht">5,00
    <input value="5,00" name="Extravoertuig_prijs" type="hidden"></td>
    <td><select name="Extravoertuig_aantal">
        <option value="0">0 nachten</option>
        <option value="1">1 nacht</option>
        <option value="2">2 nachten</option>
        <option value="3">3 nachten</option>
        <option value="4">4 nachten</option>
        <option value="5">5 nachten</option>
        <option value="6">6 nachten</option>
        <option value="7">7 nachten</option>
        <option value="0" selected>Vul in:</option>
    </select></td>
    <td><input type="text" name="Item_subtotaal" value="" jAutoCalc="{Extravoertuig_aantal} * {Extravoertuig_prijs}"></td>
</tr>

<tr>
    <td colspan="3" align="right"><b>Subtotaal</b></td>
    <td><input type="text" name="Subtotaal" value="" jAutoCalc="SUM({Item_subtotaal})"></td>
</tr>

<tr name="line_items">
    <td >Milieu-heffing</td>
    <td  class="pernacht">1,50
    <input value="1,50" name="Milieuheffing_prijs" type="hidden"></td>
    <td><input type="text" name="Item_subtotaal_A" value="" jAutoCalc="{Hoogseizoen_aantal} * {Milieuheffing_prijs} + {Laagseizoen_aantal} * {Milieuheffing_prijs}"></td>
    <td align="right"></td>
</tr>

<tr name="line_items">
    <td>Toeristen-belasting vanaf 1& juli</td>
    <td class="pernacht">2,50
    <input value="2,50" name="ToeristenBelasting_prijs" type="hidden"></td>
    <td><input type="text" name="Item_subtotaal_A" value="" jAutoCalc="({Hoogseizoen_aantal}+{Laagseizoen_aantal}) * {Persoon_aantal} * {ToeristenBelasting_prijs}"></td>
    <td align="right"></td>
</tr>

<tr>
    <td colspan="3" align="right"><b>Totaal heffing en belasting</b></td>
    <td><input type="text" name="SubtotaalA" value="" jAutoCalc="SUM({Item_subtotaal_A})"></td>
</tr>

<tr>
    <td colspan="3" align="right"><b>Totaal verblijf</b></td>
    <td class="bg-warning"><input type="text" name="Totaal_vooruit_betalen" value="" jAutoCalc="( {Subtotaal} + {SubtotaalA})"></td>
</tr>

<tr>
    <th colspan="4"><b>Btw specificatie</b></th>
</tr>

<tr>
    <td colspan="3" align="right">Geen btw
    <input value="2,50" name="Geen_btw_prijs" type="hidden"></td>
    <td><input type="text" name="geenbtw" value="" jAutoCalc="({Hoogseizoen_aantal}*{Persoon_aantal}*{Geen_btw_prijs}+{Laagseizoen_aantal}*{Persoon_aantal}*{Geen_btw_prijs})"></td>
</tr>

<tr>
    <td colspan="3" align="right">Exclusief btw
    <input value="1,09" name="Btw_A" type="hidden"></td>
    <td><input type="text" name="exclbtw" value="" jAutoCalc="({Totaal_vooruit_betalen}-{geenbtw})/{Btw_A}"></td>
</tr>

<tr>
    <td colspan="3" align="right">Bedrag btw
    <!-- value is 1,09 x 0,09 = 0,0981 -->
    <input value="0,0981" name="Btw_B" type="hidden"></td>
    <td><input type="text" name="btwbedrag" value="" jAutoCalc="({Totaal_vooruit_betalen}-{geenbtw})/{Btw_B}"></td>
</tr>

</table>
</div>
<!--einde reserveringstabel-->
 
Laatst bewerkt:
Beste Bron,

HEEL ERG BEDANKT. Je hebt er wel veel werk ingestoken zeg.

Het werkt fantastisch! In deze tabel kan men zelf berekenen wat een verblijf gaat kosten, er hoeft niets verzonden te worden. Op het reserveringsformulier staat dezelfde berekening (iets uitgebreider) maar deze dient natuurlijk verzonden te worden.
Jammer dat het required veld nog niet werkt. Maar dat komt dus door het script zeg je. Mocht je nog een beter script kennen wat het wel kan? Het komt namelijk vaak voor dat de personen niet ingevuld worden (of alleen babies??). We ontvangen dan een te lage vooruitbetaling.

Nogmaals super bedankt. :)
 
Jammer dat het required veld nog niet werkt. Maar dat komt dus door het script zeg je.
Klik om te vergroten...
Het enige wat ik kon bedenken i.p.v. required is de optie "vul in" weghalen. Website bezoekers weten goed hoe ze iets kunnen selecteren dus waarom zou je ze er op attenderen? De value="0" wordt dan de selected optie. De hondjes zouden er dan zo uitzien.
Code: 
    <td><select name="Hond_aantal">
        <option value="0" selected>0 honden</option>
        <option value="1">1 hond</option>
        <option value="2">2 honden</option>
    </select></td>

Ook mét verplichte velden worden formulieren verkeerd ingevuld, bijv. verkeerd aantal nachten, hoog/laag seizoen verkeerd ingevuld, enz. enz. Daar is helaas niets aan te doen, ook niet met een required op bepaalde velden. Uitgebreide formulier scripts hebben een extra stap, als je op een knop "Verder" klikt krijg je een samenvatting te zien als extra controle voor de website bezoeker. Dit zijn echter custom-made script en kan je niet ergens downloaden.
 
Laatst bewerkt:
Bedankt Bron voor de tips.
Toch denk ik dat ik liever Vul in heb staan. Zo van: daar staat niet dat ik het moest invullen...

Maar je hebt gelijk, klanten zijn vindingrijk in het 'verkeerd' invullen van formulieren haha.:d
 
Suc6 met de website :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan