Het tonen van een div aan de hand van een keuze die je maakt.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

12/10/2022 16:29:58
Quote Anchor link
Hey, ik heb een formulier, daarin kun je kiezen uit 4 locaties.
Aan de hand van welke locatie je kiest, zou een div moeten verschijnen. 3 locaties moeten dezelfde div tonen, en de overige locatie een andere div. Dit werkt aan de hand van deze Javascript:
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
function printMemberships(locationId){
    const printMemberships = new FormData();
    printMemberships.append('action', 'print_memberships');
    printMemberships.append('location_id', locationId);
    axios.post(wp.ajaxurl, printMemberships)
    .then((response) => {
        console.log(response.data);
        const subscriptionSteps = document.querySelectorAll(".subscription-step");
        subscriptionSteps.forEach((step) => { step.classList.add('hidden') });
        if(response.data == 'FIT2GO Uithoorn BV'){
            subscriptionStepBox = document.querySelector(".subscription-step[data-name='exception']");
            subscriptionStepBox.classList.remove('hidden');
        } else {
            subscriptionStepBox = document.querySelector(".subscription-step[data-name='regular']");
            subscriptionStepBox.classList.remove('hidden');
        }
    });
}


Allemaal leuk en aardig, alleen beide divjes, de `subscription-step`. Bevatten beide een radio button group met dezelfde naam, dit omdat het uiteindelijk om hetzelfde formulier gaat. Alleen als je dus een radio selecteerd in de 2e div, dan selecteerd hij de radio met hetzelfde id in de eerste div. Logisch want een id moet uniek zijn. Maar wat zou hier een goede oplossing voor kunnen zijn?

Toevoeging op 12/10/2022 16:52:16:

Ik heb nu bij de 2e groep radios, een `-b` achter elk id gezet. Dit lost nu het probleem op, alleen lijkt dit mij niet de mooiste oplossing.
 
PHP hulp

PHP hulp

04/02/2023 17:11:29
 
Jan Koehoorn

Jan Koehoorn

14/10/2022 17:25:23
Quote Anchor link
Je radio's hebben waarschijnlijk een id nodig omdat je een label met een "for" attribuut hebt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<input type="radio" id="my-checkbox" name="radio-name" value="1">
<label for="my-checkbox">Label tekst</label>


Als je het zo inricht, dat je radio een child is van je label, heb je geen for en id nodig. Dan weet je browser automatisch bij welke radio een label hoort:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<label>
    <input type="radio" name="radio-name" value="1">
    Label tekst
</label>
 
Jorn Reed

Jorn Reed

17/10/2022 11:50:10
Quote Anchor link
@Jan Koehoorn

Werkt dat ook als de input op hidden staat. Wat ik vaak doe is inderdaad zoals jouw eerste voorbeeld, het id van de input gelijk maken aan de "for" van de label. Een label is makkelijker te stylen, dus dan kan ik de label de click/check functionaliteit als het ware geven. Weet niet of dat ook nog zo werkt als de label geen `for` meer heeft.

Toevoeging op 17/10/2022 11:54:39:

Update:

Heb het even getest. En het werkt inderdaad.

Toevoeging op 17/10/2022 15:08:16:

Ik had ook nog een ander form gerelateerd vraagje. Ik ben dus bezig met een multiple-step formulier. En ik vroeg me af wat nou de handigste methode is om te valideren.

Nu heb ik dit als volgt gedaan. Ik heb een input event op het formulier zelf gezet. Op het moment dat een input event triggert. Pak ik de e.target.name en e.target.value om in deze
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
function setValue(formKey, value){
    for(key in Object.keys(validationSteps)){
        if(validationSteps[key].hasOwnProperty(formKey)){
            validationSteps[key][formKey] = value;
        }
    }
}

te kijken of het in het stappen object bestaat, zo ja dan voeg ik de juiste waarde aan de juiste key toe, in de juiste stap. Elke keer als een gebruiker op 'next' klikt, loop ik door validationSteps[index] heen om te kijken of alles ingevuld is. Is dit een handige manier? Zo krijg ik in ieder geval geen gezeik met of het nou een radio/checkbox/normaal tekst veld is.
Gewijzigd op 17/10/2022 15:11:16 door Jorn Reed
 



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.