JS Form Saver

Door Johan Dam, 11 jaar geleden, 5.064x bekeken

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

  1. form_saver_example.php
  2. form_saving.txt

 

Er zijn 6 reacties op 'Js form saver'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Yea Rupie
Yea Rupie
11 jaar geleden
 
0 +1 -0 -1
Lijkt me wel een handig scriptje, heb je een demo?

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.
Pim -
Pim -
11 jaar geleden
 
0 +1 -0 -1
Meestal gebruik je toch het name attribuut om forms te identificeren?
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.
Yea Rupie
Yea Rupie
11 jaar geleden
 
0 +1 -0 -1
Ja misschien heb ik niet het hele verhaal gelezen,

Quote:
Je verzend een formulier maar omdat er iets mis gaat eindig je terug bij het formulier


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!
Jelmer -
Jelmer -
11 jaar geleden
 
0 +1 -0 -1
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById(input[i].id).value = this.storage[this.form + '_' + input[i].name];


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.
Johan Dam
Johan Dam
11 jaar geleden
 
0 +1 -0 -1
@Pim, validatie is in dit geval simpelweg een voorbeeld. Het gaat erom dat je de gegevens ookweer wilt verwijderen wanneer het formulier goed gekeurd is. Dit kan bijvoorbeeld dmv een validatie.

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.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Max van den Bosch
Max van den Bosch
10 jaar geleden
 
0 +1 -0 -1
Ik vind het inderdaad een handig scriptje, maar codetags...?

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. form_saver_example.php
  2. form_saving.txt

Labels

Navigatie

 
 

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.