JS Form Saver
// NOTE: Omdat ik de .js niet geupload krijg heb ik hem hernoemt naar een .txt
Soms zijn formulieren nogal irritant. Je verzend een formulier maar omdat er iets mis gaat (verbindings problemen bijvoorbeeld), eindig je terug bij het formulier, alleen is deze nu leeg. Kan je weer lekker opnieuw beginnen... zucht. Dit komt niet zo heel vaak voor maar er kan natuurlijk van alles mis gaan. Daarom heb ik deze javascript classe geschreven.
Het doel van dit script is om een formulier op te slaan in de localStorage. Zodat als je de pagina refreshed, de gegevens opgeslagen blijven en weer keurig worden teruggezet zodat je niks kwijt bent.
Er kan gekozen worden tussen sessionStorage en localStorage. Ik kan me voorstellen dat het niet wenselijk is dat een gebruiker een formulier gedeeltelijk invuld, de site verlaat, paar dagen later terugkomt en het erg vreemd vind dat het formulier al half is ingevuld. Door sessionStorage te gebruiken kan dit voorkomen worden.
Ook ZAT er een hele simpele validatie functie op. Dit was meer bedoeld als een dummy functie.
Deze functie controleerde niks anders dan of alles was ingevuld. Omdat dit zo beperkt is en niks te maken heeft met het formulier op te slaan. Heb ik hem verwijderd.
Er is ook een simpele check functie aanwezig. Deze controleert of localStorage wel ondersteund word zodat je eventueel een alternatief kan gebruiken. Op dit moment word localStorage door alle moderne browsers ondersteund (zelfs IE8)
Mocht het niet duidelijk zijn, het werkelijk opslaan van de gegevens in bv een database oid moet je nog steeds zelf doen.
Dit script ondersteund bijna alle input velden (geen file) en ook select en textarea.
Het is makkelijk om div's en andere elementen toe te voegen. Dit zou wensenlijk kunnen zijn gezien de 'editable' attribuut van html5. Dit lijkt mij echter zo uitzonderlijk dat ze niet standaard ondersteund worden.
Gesponsorde koppelingen
PHP script bestanden
Er zijn 6 reacties op 'Js form saver'
-0 
Persoonlijk zou ik niet op dit idee gekomen zijn, want ik zou gewoon de _POST variabel in de value van de input stoppen. Wel lijkt het me handig om je script overzichtelijker te maken en het zal veel werk schelen bij een groot formulier.
-0
Van dat localStorage had ik nog nooit gehoord. Leuk om te weten.
Maar waarom die validatie? Dat heeft toch niets met opslag te maken en ook is vaak niet elk veld vereist.
Is alleen niet onblur beter dan onkeyup? Zal veer performance schelen. En waarom moet die listener er bij elk veld staan? Je kan er ook een CSS klasse van maken en dan in de load() functie de listeners toevoegen.
@Yea Rupie, $_POST heeft hier niets mee te maken, omdat er nog geen data naar de server is verstuurd.
-0
Ik dacht dat als je het hele formulier hebt verzenden dat er een melding kwam dat je gegevens niet goed ingevuld waren.
Ik heb het scriptje uitgetest en het ziet mooi uit, lijkt me handig om te gebruiken.
Bedankt!
-0
Waarom getElementById wanneer input[i] al het element is wat je wilt hebben?
Ondersteuning voor textarea lijkt me nog wel een must. Juist daar vul je hele verhalen in die je liever niet 2x opnieuw typt.
En ik denk dat ik localStorage zou verkiezen boven sessionStorage, maar dan met een soort timeout. Dat behoedt je ook voor de oh-shit-internet-doet-het-niet-even-opnieuw-opstarten en de oh-shit-stroom-op situaties.
-0
Die listener kan inderdaad anders. Om dit script zo flexibel mogelijk te houden heb ik het bij simpele functies gehouden zodat je ze op welke manier dan ook kan opvragen. Onkeyup kan, onblur kan, een listener maken kan ook. Kies maar.
@Jelmer, bedankt voor de opmerking, geen idee waarom dat zo staat... dit waren ooit een handvol losse functies waar ik maar een classe van gemaakt heb. Mogelijk dat het daar wat mee te maken heeft.
Ik ben nu bezig om ondersteuning voor andere elementen toe te voegen. Textarea is zojuist gelukt. Zal hem later vandaag even updaten.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu