Checkboxen en het live bijhouden van een arrya

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

02/06/2022 10:43:59
Quote Anchor link
Hoi.

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?
 
PHP hulp

PHP hulp

04/02/2023 16:07:55
 
Jan Koehoorn

Jan Koehoorn

02/06/2022 11:42:29
Quote Anchor link
Ongeveer zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Jorn Reed

Jorn Reed

02/06/2022 11:47:54
Quote Anchor link
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.

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.
 
Jan Koehoorn

Jan Koehoorn

02/06/2022 20:50:08
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.