Skip to main content

Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 3.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

opgelost Chronoforms - Rekenen in formulier

Chronoforms - Rekenen in formulier

01 apr 2015 22:53
#13
Dat is dan iets waar ik overheen heb gekeken. Dat kan iedereen overkomen, maar nu: Hoe krijg ik mijn code werkend in chronoforms. Moet dat in JQUERY of kan het ook in JAVASCRIPT....
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33

Chronoforms - Rekenen in formulier

01 apr 2015 23:09 - 01 apr 2015 23:12
#14
Die JavaScript code van jou, ziet er een beetje te complex uit voor wat het moet doen ;).
Houdt er rekening mee dat de veld id's in de HTML versie anders zijn dan die in chronoforms.

Volgens mij plaats je een chronoforms formulier op een pagina dmv een shortcode? Zoja, gewoon het artikel bewerken en het script onder de shortcode toevoegen tussen script tags. Aangezien je dingen wil updaten als waarde veranderd, kun je beter gebruik maken van events. Probeer anders even de volgende code op de pagina bij je formulier te plaatsen(de id's van de code staan goed voor chronoforms).
Code:
jQuery("#speltak").on('change', function() { verander(); }); jQuery("#pakket1").on('change', function() { verander(); }); jQuery("#pakket2").on('change', function() { verander(); }); jQuery("#pakket3").on('change', function() { verander(); }); function verander() { if(jQuery("#speltak").val() != "") { var speltak = jQuery("#speltak").val(); var pakket2 = jQuery("#pakket2").val(); var pakket3 = jQuery("#pakket3").val(); var schaal = 1; if(speltak == "Leiding") { var pakket1 = jQuery("#pakket1").val(); } else{ var pakket1 = 0; } switch(speltak){ case "Leiding": //Leiding bijvoorbeeld 10% korting schaal = schaal-0.1; break; case "Bestuur": //Bestuur ook 10% korting schaal = schaal-0.1; break; case "Ouder": //Ouder bijvoorbeeld 5% korting schaal = schaal-0.05; default: //standaard niets doen break; } //bedragen pakket1 = pakket1*7.50; pakket2 = pakket2*7.50; pakket3 = pakket3*2.00; //berekenen van het bedrag var totaal = pakket1+pakket2+pakket3*schaal; //terug plaatsen van de waarde jQuery("#totaal").val("€"+totaal.toFixed(2)); } else { jQuery("#totaal").val(""); } }

PS: jQuery is een JavaScript Library oftewel JavaScript
Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Juliank92
  • Juliank92's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 1722

Chronoforms - Rekenen in formulier

01 apr 2015 23:13
#15
Dank voor je code voorbeeld juliank92, echter snap ik het even niet. Waarom staat bijvoorbeeld de select van speltak er ook in? alleen die van pakket1, 2 en 3 moet erin.
En het klopt dat de dreamweaver en chronoforms niet overeenkomen, dreamweaver is mijn test bestandje.

Kan je misschien je code toelichten zodat ik het misschien wat beter snap?
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33

Chronoforms - Rekenen in formulier

01 apr 2015 23:18
#16
Ik heb wat commentaar in de code geplaatst, ik heb een switch met speltak erin gezet, om een voorbeeld te tonen van eventuele kortings berekeningen. Mocht dit niet willen/nodig hebben, dan kun je de switch eruit halen. Speltak is verder nodig bij die if conditie, om te kijken of je bij de leiding zit, alleen de leiding ziet immers het element met id pakket1.
Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Juliank92
  • Juliank92's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 1722

Chronoforms - Rekenen in formulier

01 apr 2015 23:34
#17
Dus als ik onderstaande code in mijn chronoforms formulier zet dan zou het theoretisch gezien moeten werken?
Code:
<div class="form-group gcore-form-row" id="form-row-naam"><label for="naam" class="control-label gcore-label-left">Naam lid:</label> <div class="gcore-input gcore-display-table" id="fin-naam"><input name="naam" id="naam" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-email"><label for="email" class="control-label gcore-label-left">Email adres:</label> <div class="gcore-input gcore-display-table" id="fin-email"><input name="email" id="email" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;,&#039;email&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-telefoon"><label for="telefoon" class="control-label gcore-label-left">Telefoon nummer:</label> <div class="gcore-input gcore-display-table" id="fin-telefoon"><input name="telefoon" id="telefoon" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;,&#039;phone&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-speltak"><label for="speltak" class="control-label gcore-label-left">Speltak:</label> <div class="gcore-input gcore-display-table" id="fin-speltak"><select name="speltak" id="speltak" size="" class="validate[&#039;required&#039;] form-control A" title="" style="" data-load-state="" data-tooltip=""> <option value="">Kies je speltak...</option> <option value="Bevers">Bevers</option> <option value="Welpen">Welpen</option> <option value="Scouts">Scouts</option> <option value="Explorers">Explorers</option> <option value="Roverscouts">Roverscouts</option> <option value="Stam">Stam</option> <option value="Leiding">Leiding</option> <option value="Bestuur">Bestuur</option> <option value="Ouder">Ouder</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket1"><label for="pakket1" class="control-label gcore-label-left">Das + Badge (Bij installatie):</label> <div class="gcore-input gcore-display-table" id="fin-pakket1"><select name="pakket1" id="pakket1" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders...">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket1_anders"><label for="pakket1_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket1_anders"><input name="pakket1_anders" id="pakket1_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-pakket2"><label for="pakket2" class="control-label gcore-label-left">Das zonder badge:</label> <div class="gcore-input gcore-display-table" id="fin-pakket2"><select name="pakket2" id="pakket2" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket2_anders"><label for="pakket2_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket2_anders"><input name="pakket2_anders" id="pakket2_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-pakket3"><label for="pakket3" class="control-label gcore-label-left">Losse badge:</label> <div class="gcore-input gcore-display-table" id="fin-pakket3"><select name="pakket3" id="pakket3" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket3_anders"><label for="pakket3_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket3_anders"><input name="pakket3_anders" id="pakket3_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-totaal"><label for="totaal" class="control-label gcore-label-top">Totaal bedrag in euro's (€):</label> <div class="gcore-input-wide gcore-display-table" id="fin-totaal"><input name="totaal" id="totaal" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="" data-inputmask="" data-load-state="disabled" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-button15"><div class="gcore-input gcore-display-table" id="fin-button15"><input name="button15" id="button15" type="submit" value="Bereken de prijs!" class="btn btn-default form-control A" style="" data-load-state="" /></div></div> <script> jQuery("#speltak").on('change', function() { verander(); }); jQuery("#pakket1").on('change', function() { verander(); }); jQuery("#pakket2").on('change', function() { verander(); }); jQuery("#pakket3").on('change', function() { verander(); }); function verander() { if(jQuery("#speltak").val() != "") { var speltak = jQuery("#speltak").val(); var pakket2 = jQuery("#pakket2").val(); var pakket3 = jQuery("#pakket3").val(); var schaal = 1; if(speltak == "Leiding") { var pakket1 = jQuery("#pakket1").val(); } else{ var pakket1 = 0; } //bedragen pakket1 = pakket1*7.50; pakket2 = pakket2*7.50; pakket3 = pakket3*2.00; //berekenen van het bedrag var totaal = pakket1+pakket2+pakket3; //terug plaatsen van de waarde jQuery("#totaal").val("€"+totaal.toFixed(2)); } else { jQuery("#totaal").val(""); } } </script>

Of moet dat javascript code zoals astrid had gezegd in de setup boven show html in de add javascript???
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33

Chronoforms - Rekenen in formulier

01 apr 2015 23:39
#18
Inderdaad, zo zou het moeten werken.
Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Juliank92
  • Juliank92's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 1722

Chronoforms - Rekenen in formulier

01 apr 2015 23:39
#19
Het werkt, nu alleen nog 1 vraag:

Ik heb bij de selects van de aantallen ook een optie Anders... en vervolgens krijg je dus een losse input te zien zodat je handmatig een aantal kan invullen. Hoe voeg ik die in de javascript in, dus als je in de dropdown van pakket1 Anders... hebt gekozen, dat hij dan de waarde van pakket1_anders uitleest en die gebruikt?
Zal vast heel makkelijk zijn, maar ik zie het even niet.
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33

Chronoforms - Rekenen in formulier

01 apr 2015 23:47
#20
Condities maken voor als de betreffende dropdowns de value Anders hebben, de waarde wordt opgehaald uit het betreffende input text element komt.
Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Juliank92
  • Juliank92's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 1722

Chronoforms - Rekenen in formulier

01 apr 2015 23:56
#21
Code:
if(pakket1 == "Anders...") { var pakket1 = jQuery("#pakket1_anders").val(); } else{ var pakket1 = jQuery("#pakket1").val(); } if(pakket2 == "Anders...") { var pakket2 = jQuery("#pakket2_anders").val(); } else{ var pakket2 = jQuery("#pakket2").val(); } if(pakket3 == "Anders...") { var pakket3 = jQuery("#pakket3_anders").val(); } else{ var pakket3 = jQuery("#pakket3").val(); }

op deze manier, of gaat het nu grandioos fout?
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33

Chronoforms - Rekenen in formulier

02 apr 2015 00:02
#22
De else statements die je maakt kun je verwijderen, aangezien je variabele al in je conditie gebruikt dus die heeft al een waarde. De value moet zijn Anders, dus zonder 3 puntjes erachter.
Groetjes, Julian.

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen via dit forum
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Juliank92
  • Juliank92's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 1722

Chronoforms - Rekenen in formulier

02 apr 2015 00:09
#23
Dank Juliank92 en Astrid, dankzij jullie ben ik tot de volgende code gekomen dat volledig functioneerd naar mijn wensen:
Code:
<div class="form-group gcore-form-row" id="form-row-naam"><label for="naam" class="control-label gcore-label-left">Naam lid:</label> <div class="gcore-input gcore-display-table" id="fin-naam"><input name="naam" id="naam" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-email"><label for="email" class="control-label gcore-label-left">Email adres:</label> <div class="gcore-input gcore-display-table" id="fin-email"><input name="email" id="email" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;,&#039;email&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-telefoon"><label for="telefoon" class="control-label gcore-label-left">Telefoon nummer:</label> <div class="gcore-input gcore-display-table" id="fin-telefoon"><input name="telefoon" id="telefoon" value="" placeholder="" maxlength="" size="" class="validate[&#039;required&#039;,&#039;phone&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-speltak"><label for="speltak" class="control-label gcore-label-left">Speltak:</label> <div class="gcore-input gcore-display-table" id="fin-speltak"><select name="speltak" id="speltak" size="" class="validate[&#039;required&#039;] form-control A" title="" style="" data-load-state="" data-tooltip=""> <option value="">Kies je speltak...</option> <option value="Bevers">Bevers</option> <option value="Welpen">Welpen</option> <option value="Scouts">Scouts</option> <option value="Explorers">Explorers</option> <option value="Roverscouts">Roverscouts</option> <option value="Stam">Stam</option> <option value="Leiding">Leiding</option> <option value="Bestuur">Bestuur</option> <option value="Ouder">Ouder</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket1"><label for="pakket1" class="control-label gcore-label-left">Das + Badge (Bij installatie):</label> <div class="gcore-input gcore-display-table" id="fin-pakket1"><select name="pakket1" id="pakket1" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders...">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket1_anders"><label for="pakket1_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket1_anders"><input name="pakket1_anders" id="pakket1_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-pakket2"><label for="pakket2" class="control-label gcore-label-left">Das zonder badge:</label> <div class="gcore-input gcore-display-table" id="fin-pakket2"><select name="pakket2" id="pakket2" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket2_anders"><label for="pakket2_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket2_anders"><input name="pakket2_anders" id="pakket2_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-pakket3"><label for="pakket3" class="control-label gcore-label-left">Losse badge:</label> <div class="gcore-input gcore-display-table" id="fin-pakket3"><select name="pakket3" id="pakket3" size="" class="form-control A" title="" style="" data-load-state="hidden_parent" data-tooltip=""> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="Anders">Anders...</option> </select></div></div><div class="form-group gcore-form-row" id="form-row-pakket3_anders"><label for="pakket3_anders" class="control-label gcore-label-left">Anders, namelijk:</label> <div class="gcore-input gcore-display-table" id="fin-pakket3_anders"><input name="pakket3_anders" id="pakket3_anders" value="" placeholder="" maxlength="" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-totaal"><label for="totaal" class="control-label gcore-label-top">Totaal bedrag in euro's (€):</label> <div class="gcore-input-wide gcore-display-table" id="fin-totaal"><input name="totaal" id="totaal" value="" placeholder="" maxlength="" size="5" class="form-control A" title="" style="" data-inputmask="" data-load-state="disabled" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-button15"><div class="gcore-input gcore-display-table" id="fin-button15"><input name="button15" id="button15" type="submit" value="Verstuurd de bestelling!" class="btn btn-default form-control A" style="" data-load-state="" /></div></div> <script> jQuery("#speltak").on('change', function() { verander(); }); jQuery("#pakket1").on('change', function() { verander(); }); jQuery("#pakket1_anders").on('change', function() { verander(); }); jQuery("#pakket2").on('change', function() { verander(); }); jQuery("#pakket2_anders").on('change', function() { verander(); }); jQuery("#pakket3").on('change', function() { verander(); }); jQuery("#pakket3_anders").on('change', function() { verander(); }); function verander() { if(jQuery("#speltak").val() != "") { var speltak = jQuery("#speltak").val(); var pakket2 = jQuery("#pakket2").val(); var pakket3 = jQuery("#pakket3").val(); if(speltak == "Leiding") { var pakket1 = jQuery("#pakket1").val(); } else{ var pakket1 = 0; } if(pakket1 == "Anders...") { pakket1 = jQuery("#pakket1_anders").val(); } if(pakket2 == "Anders") { pakket2 = jQuery("#pakket2_anders").val(); } if(pakket3 == "Anders") { pakket3 = jQuery("#pakket3_anders").val(); } //bedragen pakket1 = pakket1*7.50; pakket2 = pakket2*7.50; pakket3 = pakket3*2.00; //berekenen van het bedrag var totaal = pakket1+pakket2+pakket3; //terug plaatsen van de waarde jQuery("#totaal").val("€"+totaal.toFixed(2)); } else { jQuery("#totaal").val(""); } } </script>
  • christiaan
  • christiaan's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 33
Moderators: JelleRomke
Tijd voor maken pagina: 0.932 seconden
Gemaakt door Kunena

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie