Checkboxen en het live bijhouden van een arrya
Ik ben bezig met een inschrijf formulier. Je begint met het kiezen van een locatie. Aan de hand daarvan gebruik ik ajax om de juiste abonnementen in te laden. Bij het klikken op een abonnement hoort hij de bijbehorende addons in te laden.
Dit werkt prima. De addons zijn checkboxen, maar zodanig gestyled dat het op mooie knoppen lijken. Ik heb dit gedaan, zodat ik de checkbox functionaliteit van html zelf kan gebruiken zonder al te veel Javascript toe te passen. In PHP worden de checkboxen die geselecteerd zijn dan uitgelezen als array. Dit werkt ook prima.
Nu komt het lastige. De click events van de addons, die moeten in een mutation observer. I.v.b. met de situatie die ik hier boven omschrijf.
Ik heb namelijk een overzichts divje, de naam van het abbonement tonen/overschrijven is niet zo lastig. Maar ik wil ook de geselecteerde addons live tonen/updaten. Ik weet alleen niet zo goed hoe ik dit moet gaan aanpakken.
Het is uiteindelijk de bedoeling dat ik een array maak, die bij aanvinken/uitvinken de array update. En dat ik die array loop in de html van dat divje.
heeft iemand een idee?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body {font: 14px Verdana;}
</style>
</head>
<body>
<form>
<input type="checkbox" id="abonnement-1" name="abonnement[]" value="abonnement 1">
<label for="abonnement-1">abonnement 1</label>
<input type="checkbox" id="abonnement-2" name="abonnement[]" value="abonnement 2">
<label for="abonnement-2">abonnement 2</label>
<input type="checkbox" id="abonnement-3" name="abonnement[]" value="abonnement 3">
<label for="abonnement-3">abonnement 3</label>
<input type="checkbox" id="abonnement-4" name="abonnement[]" value="abonnement 4">
<label for="abonnement-4">abonnement 4</label>
<input type="checkbox" id="abonnement-5" name="abonnement[]" value="abonnement 5">
<label for="abonnement-5">abonnement 5</label>
</form>
<ul id="info"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var abonnementen = {
'abonnement 1': false,
'abonnement 2': false,
'abonnement 3': false,
'abonnement 4': false,
'abonnement 5': false,
}
function displayInfo() {
var html = '';
$('#info').html(html);
for (var i in abonnementen) {
if (abonnementen[i]) {
html += '<li>' + i + '</li>';
}
}
$('#info').html(html);
}
$(document).on('click', 'input[type=checkbox]', function() {
abonnementen[$(this).val()] = $(this).prop('checked');
displayInfo();
})
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body {font: 14px Verdana;}
</style>
</head>
<body>
<form>
<input type="checkbox" id="abonnement-1" name="abonnement[]" value="abonnement 1">
<label for="abonnement-1">abonnement 1</label>
<input type="checkbox" id="abonnement-2" name="abonnement[]" value="abonnement 2">
<label for="abonnement-2">abonnement 2</label>
<input type="checkbox" id="abonnement-3" name="abonnement[]" value="abonnement 3">
<label for="abonnement-3">abonnement 3</label>
<input type="checkbox" id="abonnement-4" name="abonnement[]" value="abonnement 4">
<label for="abonnement-4">abonnement 4</label>
<input type="checkbox" id="abonnement-5" name="abonnement[]" value="abonnement 5">
<label for="abonnement-5">abonnement 5</label>
</form>
<ul id="info"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var abonnementen = {
'abonnement 1': false,
'abonnement 2': false,
'abonnement 3': false,
'abonnement 4': false,
'abonnement 5': false,
}
function displayInfo() {
var html = '';
$('#info').html(html);
for (var i in abonnementen) {
if (abonnementen[i]) {
html += '<li>' + i + '</li>';
}
}
$('#info').html(html);
}
$(document).on('click', 'input[type=checkbox]', function() {
abonnementen[$(this).val()] = $(this).prop('checked');
displayInfo();
})
});
</script>
</body>
</html>
Toevoeging op 02/06/2022 11:50:53:
Jorn Reed op 02/06/2022 11:47:54:
Jup, ik gebruik zelf geen jquery. Maar veel valt makkelijk uit te voeren in puur JS. Het word alleen nog even uitvogelen dan, hoe ik het in die mutation observer toepas.
Oh ja, en het moet in mijn geval wat dynamischer, omdat een bepaald abonnement bijvoorbeeld andere addons kan hebben als een ander abonnement.
Quote:
Aan de hand daarvan gebruik ik ajax om de juiste abonnementen in te laden.
Ja, dus vul die var abonnementen uit mijn voorbeeld op basis van wat je AJAX call teruggeeft.