Id toepassen bij vervolgkeuzelijst
Bij de checkbox staat het volgende:
<input type="checkbox" name="Diner" id="Diner_" value="Diner Satebuffet"onclick="javascript:calculateTotals();">
Hoe kan ik de "id" toepassen bij een vervolgkeuzelijst?
<select size="1" name="Activiteit">
<option selected value="Maak hier een keuze">Maak hier een keuze</option>
<option value="Alleen Diner">Alleen Diner</option>
<option value="Diner + feest ">Diner + feest</option>
<option value="Alleen feest">Alleen feest</option>
</select>
Alvast bedankt voor de reactie(s)
Gaat het om een chained selectbox?
toevoegen bij het vervolgkeuzelijst maar weet niet hoe ik dit moet toevoegen.
Gewijzigd op 17/09/2018 14:49:23 door Thomas van den Heuvel
Gewijzigd op 17/09/2018 16:25:55 door Paul Groenewegen
<script >
function calculateTotals ()
{
nCost3 = 10;
nCost4 = 5;
nTotal = 0;
if (document.getElementById("Diner_").checked )
{
nTotal = nTotal + nCost3;
}
if (document.getElementById("Feest_").checked )
{
nTotal = nTotal + nCost4;
}
//alert("Total=" + nTotal);
document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
<input type="checkbox" name="Diner" id="Diner_" value="Diner Satebuffet"onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b>
Diner </b></font>
<input type="checkbox" name="Feest" id="Feest_" value="Feest" onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b> Feest </b>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script >
function calculateTotals ()
{
nCost3 = 10;
nCost4 = 5;
nTotal = 0;
if (document.getElementById("Diner_").checked )
{
nTotal = nTotal + nCost3;
}
if (document.getElementById("Feest_").checked )
{
nTotal = nTotal + nCost4;
}
//alert("Total=" + nTotal);
document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
function calculateTotals ()
{
nCost3 = 10;
nCost4 = 5;
nTotal = 0;
if (document.getElementById("Diner_").checked )
{
nTotal = nTotal + nCost3;
}
if (document.getElementById("Feest_").checked )
{
nTotal = nTotal + nCost4;
}
//alert("Total=" + nTotal);
document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
<input type="checkbox" name="Diner" id="Diner_" value="Diner Satebuffet" onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b>
Diner </b></font>
<input type="checkbox" name="Feest" id="Feest_" value="Feest" onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b> Feest </b>
Gewijzigd op 18/09/2018 07:44:54 door Paul Groenewegen
- Ariën - op 17/09/2018 18:50:37:
Zou je code-tags willen gebruiken? Dan leest het makkelijker hier op het forum.
Zie ook Veelgestelde Vragen
Aangepast
Toevoeging op 18/09/2018 12:17:51:
Bij deze op de gewenste manier:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script >
function calculateTotals ()
{
nCost3 = 10;
nCost4 = 5;
nTotal = 0;
if (document.getElementById("Diner_").checked )
{
nTotal = nTotal + nCost3;
}
if (document.getElementById("Feest_").checked )
{
nTotal = nTotal + nCost4;
}
//alert("Total=" + nTotal);
document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
function calculateTotals ()
{
nCost3 = 10;
nCost4 = 5;
nTotal = 0;
if (document.getElementById("Diner_").checked )
{
nTotal = nTotal + nCost3;
}
if (document.getElementById("Feest_").checked )
{
nTotal = nTotal + nCost4;
}
//alert("Total=" + nTotal);
document.getElementById("Totaal_bedrag").value = nTotal.toFixed(2);
}
</script>
<input type="checkbox" name="Diner" id="Diner_" value="Diner Satebuffet" onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b>
Diner </b></font>
<input type="checkbox" name="Feest" id="Feest_" value="Feest" onclick="javascript:calculateTotals();"></span></font></span></font><font face="Verdana" style="font-size: 11pt"><b> Feest </b>
Waar moet ik id="Feest_" en onclick="javascript:calculateTotals();"> toevoegen bij onderstaande vervolgkeuzelijst?
<select size="1" name="Activiteit">
<option selected value="Maak hier een keuze">Maak hier een keuze</option>
<option value="Alleen Diner">Alleen Diner</option>
<option value="Diner + feest ">Diner + feest</option>
<option value="Alleen feest">Alleen feest</option>
</select>
Alvast bedankt voor de reactie(s)
Gewijzigd op 18/09/2018 07:46:23 door Paul Groenewegen
Allereerst heb je twee checkboxen die aangeven of iemand een diner wilt, een feest, of allebei.
In het andere geval zijn deze checkboxen samengenomen in een keuzelijst die in wezen hetzelfde doet?
Of wil je dat op grond van de keuze van de checkboxen op een later moment de juist activiteit is geselecteerd in de keuzelijst? Maar dan zou je je af kunnen vragen waarom je dit op twee verschillende manieren zou willen regelen?
Of ben je de checkbox-variant aan het omzetten naar de keuzelijst-variant, maar zie je niet direct hoe je de bijbehorende JavaScript zou moeten omschrijven?
Dus:
- wat wil je precies bereiken?
- waar loop je precies vast?
In wat voor geval dan ook, ik zou de values waarden geven die zinniger zijn voor machines. Kies bijvoorbeeld voor de activiteit Diner de waarde 1, en voor activiteit Feest de waarde 2. En elke volgende activiteit of verzameling van activiteiten een ander nummer (bijvoorbeeld een macht van 2 en/of een optelsom hiervan, of gewoon het volgende volgnummer). Vervolgens kun je dan in code (makkelijker) een gevalsonderscheid maken tussen de geselecteerde activiteit(en).
Goed punt!
Nu ik zo lees had ik het idd niet echt duidelijk omschreven. Bij deze:
Graag wil ik de checkbox vervangen voor de volgkeuzelijst maar heb geen idee hoe ik de bijbehorende JavaScript moet omschrijven/aanpassen zodat deze toch het zelfde doet als bij de checkbox, de bedragen optellen van de gekozen optie(s).
Bovenstaand script/formulier is maar een klein stukje van het aanmeldformulier.
Heb alleen het deel geplaatst waar het om ging.
Betreft de waarden: deze ga ik aanpassen naar: activiteit 1, activiteit 2, etc...
Gewijzigd op 18/09/2018 21:47:36 door Paul Groenewegen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<select id="product-select" name="product">
<option value selected="selected">Kies een product</option>
<option value="1" data-price="1.50">Sinasappelen</option>
<option value="3" data-price="2.25">Peren</option>
</select>
<div id="output"></div>
<script>
window.onload = function() {
var product_select = document.getElementById('product-select');
var output_div = document.getElementById('output');
product_select.onchange = function() {
output_div.innerHTML =
'value (database id): ' + this.options[this.selectedIndex].value +
'<br>prijs: ' + this.options[this.selectedIndex].dataset.price;
};
};
</script>
<option value selected="selected">Kies een product</option>
<option value="1" data-price="1.50">Sinasappelen</option>
<option value="3" data-price="2.25">Peren</option>
</select>
<div id="output"></div>
<script>
window.onload = function() {
var product_select = document.getElementById('product-select');
var output_div = document.getElementById('output');
product_select.onchange = function() {
output_div.innerHTML =
'value (database id): ' + this.options[this.selectedIndex].value +
'<br>prijs: ' + this.options[this.selectedIndex].dataset.price;
};
};
</script>
Werkend voorbeeld: https://codepen.io/anon/pen/ZMmoZj
Gewijzigd op 18/09/2018 22:18:42 door Frank Nietbelangrijk
Bedankt, maar dit is een compleet ander script.
liefst wil ik het huidige script gebruiken omdat het aanmeldformulier al klaar is en alles werkt goed behalve de vervolgkeuzelijst en mijn kennis van PHP is niet voldoende om dit effe snel alles om te zetten.
Bedankt voor het plaatsen van dat script.
Helaas kan ik dit niet doorgronden want ik heb minimale kennis van PHP omdat ik er te weinig mee werk (ongeveer 2x per jaar)
Alleen als er een aanmeldformulier moet komen gebruik ik altijd het zelfde script.
Deze kan ik wel een klein beetje aanpassen en meestal kopieer en plak ik.
Heb al wel het een en ander geprobeerd bij een volgkeuzelijst maar zonder succes.
Daarom had ik mijn vraag hier geplaatst.
Omdat de totaalprijs wordt bijgehouden is er geen berekening nodig, je hoeft enkel de waarde van het data-attribuut van de geselecteerde optie over te nemen.
In jouw code maak je gebruik van de identifiers "Diner_" en "Feest_", die komen te vervallen en worden vervangen door de naam en/of het id "Activiteit". De berekende waarde wordt uiteindelijk afgeleverd in "Totaal_bedrag".
In @Frank zijn code wordt de waarde direct opgehaald uit "product-select" en afgeleverd in de "output" div.
Toegegeven, misschien is dit lastig om allemaal direct te doorgronden, maar functioneel gezien is dit nagenoeg hetzelfde. Hier is wel wat code-interpretatie voor nodig, maar als je af en toe van dit soort wijzigingen wilt verrichten helpt het enorm als je de code kunt lezen.
@Frank zijn snippet is vrij kort, je zou bij wijze van oefening deze regel voor regel kunnen verwerken en in lopende zinnen jezelf proberen te vertellen wat deze doet. Op het moment dat je begint te zien wat deze code voorstelt (en je deze dan dus ook echt interpreteert) snap je de werking ook beter, en ook omgekeerd - als je bepaalde wensen hebt om iets (om) te schrijven, kun je vantevoren ook al beter een route uitstippelen om de code vorm te geven. Al is het in eerste instantie maar op een abstract/functioneel niveau. In zekere zin heb je dan al een blauwdruk van wat je wilt, het enige wat je dan hoeft te doen is de bouwmaterialen bij elkaar sprokkelen in het dialect (JavaScript/PHP etc) om het daadwerkelijk te bouwen.
Dit is wel een iteratief proces uiteraard, het kost enige oefening om direct van een ontwerp naar een implementatie te gaan want hier heb je wat bagage voor nodig (theorie, abstract denken, ervaring met bouwen). Dit is niet iets wat zomaar tot je komt, hier zul je wat tijd in moeten investeren.
En als je zover niet wilt gaan, is dat ook prima, maar dan kun je het bovenstaande beter uitbesteden, hoe simpel iets ook lijkt.
Gewijzigd op 20/09/2018 14:59:48 door Thomas van den Heuvel
Bedankt voor de uitleg, zal het het gaan proberen.