Probleem met JavaScript bij formulier

Status
Niet open voor verdere reacties.

Taajn

Nieuwe gebruiker
Lid geworden
27 sep 2023
Berichten
1
Hoi,

ik heb een google formulier nagemaakt om dit, als het mij zou lukken, volledig zelf vorm te geven. Alleen loop ik hier op vast. Het lukt om het formulier te verzenden via mijn eigen formulier, maar een melding wanneer niet alle velden zijn ingevuld lukt niet. De knop volgende zou ook niet mogen werken zolang niet alle velden zijn ingevuld. Alle velden zijn namelijk verplicht in te vullen.

Wanneer er op de knoppen Volgende en Submit wordt geklikt mag je dus niet verder kunnen gaan als niet alles is ingevuld. De Volgende knop werkt eigenlijk gewoon door de display met css te veranderen.
Dit doe ik op deze manier omdat ik het anders niet voor elkaar kreeg dat hij alle gegevens, die reeds zijn ingevuld wil onthouden. In de code staat er dat dit via "pageHistory" en de daarbij behorende values, maar dat is niet gelukt. Misschien maak ik het mijzelf dus veel te moeilijk?

Als je op de Volgende knop klikt bij de tweede sectie, en dan vanuit sectie 3 terug gaat met de vorige knop, krijg je de meldingen wel te zien. Maar je kan, ondanks deze meldingen, gewoon op de volgende knop klikken. Dat is natuurlijk niet de bedoeling. Ik zou eigenlijk graag willen dat van zodra je de eerste keer bij sectie 2 komt, je niet op Volgende kan klikken zolang de meldingen, dat je een optie moet selecteren, er nog staan. Van zodra alles wel is aangeduid, verdwijnen de meldingen en kan je dus wel verder naar sectie 3.


Code van het formulier: https://codepen.io/taajn/pen/BavxYop


Hoe ik de controle wil, kan je hier zien: https://codepen.io/taajn/pen/dywedMb
Daar werkt dat stukje dus wel. Maar ik krijg beide functies niet samengevoegd.
Of is dit eigenlijk zelfs niet mogelijk op deze manier?

Hopelijk is alles duidelijk. Alvast bedankt voor het meedenken!
 
Laatst bewerkt door een moderator:
Wow, langverhaal :eek: Als het wordt samengevat lijkt dit er dan op?

Formulier
alle velden zijn verplicht.

sectie 1
knop "Terug" is niet aanwezig.
knop "Volgende" gaat naar sectie 2 als sectie 1 helemaal is ingevuld.

sectie 2
knop "Terug" werkt altijd; gaat naar sectie 1.
knop "Volgende" gaat naar sectie 3 als sectie 1+2 helemaal zijn ingevuld.

sectie 3
knop "Terug" werkt altijd; gaat naar sectie 2.
knop "Verstuur" verstuurt de form als sectie 1+2+3 helemaal zijn ingevuld.
 
Beste,

Ik heb 2 simpele dingen gevonden en even aangepast:
- Uw groepen buttons heten "entry.740489712". In de js checkt je op Groep1 of 2
- Het laden van uw nieuwe form gebeurd momenteel altijd (de code zit onder de onclick). Ik heb deze verplaatst naar de "performNextAction"-functie.

voorbeeld:
https://codepen.io/maarten_v/pen/zYymqpP

De code is nu enkel hard-coded voor de buttons het het 1e formulier en de overgang naar het 2e. Uiteraard kunnen de functies betere en dynamischer zodat ze herbruikbaar worden.
Hopelijk kunt U hier verder mee.
 
Laatst bewerkt:
Dubbele post. De vraag is ook gesteld op deze website.
Antwoorden op beide sites kunnen dan door elkaar gaan lopen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan