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

Door Jorn Reed op 12-10-2022 16:29

2.412 views

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:


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?

[size=xsmall]Toevoeging op 12/10/2022 16:52:16:[/size]

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.

Jan Koehoorn

14-10-2022 17:25

Je radio's hebben waarschijnlijk een id nodig omdat je een label met een "for" attribuut hebt:


<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:


<label>
    <input type="radio" name="radio-name" value="1">
    Label tekst
</label>

J Jorn Reed

17-10-2022 11:50 gewijzigd op 17-10-2022 15:11

@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.

[size=xsmall]Toevoeging op 17/10/2022 11:54:39:[/size]

Update:

Heb het even getest. En het werkt inderdaad.

[size=xsmall]Toevoeging op 17/10/2022 15:08:16:[/size]

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


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.

Reageren

Inloggen om te reageren