Vermeld in iedere vraag duidelijk:
- De versie van Joomla! 3.X die je gebruikt
- De volledige url van je website indien mogelijk.
- De versie van de extensie waar de vraag over gaat.
opgelost Chronoforms - Rekenen in formulier
- christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37438
- christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Juliank92
-
- Algemeen Moderator
-
- Berichten: 1722
Chronoforms - Rekenen in formulier
01 apr 2015 21:47 - 01 apr 2015 22:01
Hieronder de code van mijn test formulier gemaakt in dreamweaver (dit werkt dus wel!!! op het sub1 + sub2 + sub3 na)
HTML
JavaScript
Hieronder de automatisch gegeneerde code van mijn formulier:
Wat de bedoeling is:
Nadat een aantal (das inclusief badge bij installatie, das zonder badge, losse badge) is geselecteerd moet hij een subtotaal bedrag weergeven in een text veld. Als de gebruiker een selectieveld heeft aangepast moet het bedrag geupdate worden.
Momenteel heb ik het mijn eigen dreamweaver creatie zover dat hij de 3 afzonderlijke bedragen berekent, echter niet het totaal (sub1 + sub2 + sub3)
En de volgende vraag is dan natuurlijk, waar plaats ik het in chronovorms.
Hieronder even een linkje met het formulier van chronoforms (V5) en joomla versie is 3.4.1
www.de-havik.nl/index.php?option=com_chr...orms5&chronoform=das
Edit Juliank92: Code blok even verder opgesplist(HTML en JS)
.
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="testJavascriptRekenen.js"></script>
</head>
<body>
<form name="test">
Aantal dassen met badge (bij installatie):
<input type="text" id="aantal1" onchange="prijs1()" size="2" /><input type="text" id="total" disabled="disabled" size="5" /><br />
Aantal dassen zonder badge:
<input type="text" id="aantal2" onchange="prijs2()" size="2" /><input type="text" id="total2" disabled="disabled" size="5" /><br />
Losse badge:
<input type="text" id="aantal3" onchange="prijs3()" size="2" /><input type="text" id="total3" disabled="disabled" size="5" /><br /><br />
Totaal: <input type="text" id="total5" disabled="disabled" size="5" />
</form>
<br><br>
<span class="b">Das inclusief badge (bij installatie): á € 7,50 p.s.<br></span>
<span class="b">Das zonder badge: á € 7,50 p.s.<br></span>
<span class="b">Losse badge: á € 2,00 p.s.<br></span><br />
<span class="idet"><span class="b">Prijs<br /><span id="prijs"></span></span><br /><br />
</div>
</body>
</html>
JavaScript
Code:
function prijs1() {
var aantal_pakket1 = document.getElementById("aantal1").value;
var prijs1;
prijs1 = 7.50;
var totaal = prijs1 * aantal_pakket1;
if (totaal == NaN){
//niks
} else {
document.forms['test']['total'].value = totaal.toFixed(2);
var sub1 = document.getElementById("total").value;
var sub2 = document.getElementById("total2").value;
var sub3 = document.getElementById("total3").value;
var subTot = sub1 + sub2 + sub3;
document.forms['test']['total5'].value = '€ ' + subTot.toFixed(2);
}
}
function prijs2() {
var aantal_pakket2 = document.getElementById("aantal2").value;
var prijs2;
prijs2 = 7.50;
var totaal = prijs2 * aantal_pakket2;
if (totaal == NaN){
//niks
} else {
document.forms['test']['total2'].value = totaal.toFixed(2);
var sub1 = document.getElementById("total").value;
var sub2 = document.getElementById("total2").value;
var sub3 = document.getElementById("total3").value;
var subTot = sub1 + sub2 + sub3;
document.forms['test']['total5'].value = '€ ' + subTot.toFixed(2);
}
}
function prijs3() {
var aantal_pakket3 = document.getElementById("aantal3").value;
var prijs3;
prijs3 = 2.00;
var totaal = prijs3 * aantal_pakket3;
if (totaal == NaN){
//niks
} else {
document.forms['test']['total3'].value = totaal.toFixed(2);
var sub1 = document.getElementById("total").value;
var sub2 = document.getElementById("total2").value;
var sub3 = document.getElementById("total3").value;
var subTot = sub1 + sub2 + sub3;
document.forms['test']['total5'].value = '€ ' + subTot.toFixed(2);
}
}
Hieronder de automatisch gegeneerde code van mijn formulier:
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['required'] 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['required','email'] 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['required','phone'] 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['required'] 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>
Wat de bedoeling is:
Nadat een aantal (das inclusief badge bij installatie, das zonder badge, losse badge) is geselecteerd moet hij een subtotaal bedrag weergeven in een text veld. Als de gebruiker een selectieveld heeft aangepast moet het bedrag geupdate worden.
Momenteel heb ik het mijn eigen dreamweaver creatie zover dat hij de 3 afzonderlijke bedragen berekent, echter niet het totaal (sub1 + sub2 + sub3)
En de volgende vraag is dan natuurlijk, waar plaats ik het in chronovorms.
Hieronder even een linkje met het formulier van chronoforms (V5) en joomla versie is 3.4.1
www.de-havik.nl/index.php?option=com_chr...orms5&chronoform=das
Edit Juliank92: Code blok even verder opgesplist(HTML en JS)
. - christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37438
- christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37438
- christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37438
- christiaan
-
Heeft onderwerp gestart
- Joomla!NL ontdekker
-
- Berichten: 33
- Astrid
-
- Moderator + Technisch team
-
- Berichten: 37438
