V tem vodniku se boste naučili, kako z Javascriptom prebrati in obdelati podatke, ki jih uporabniki vnašajo v obrazce. Obrazci so ključni del vsake spletne strani, saj omogočajo uporabnikom vnašanje informacij. Pogosto se zmotno misli, da je za to potrebno uporabljati zapletene ogrodja. V tem prispevku vam bomo pokazali, kako uspešno obdelati podatke obrazca z uporabo preprostega Javascripta.
Najpomembnejši uvidi
- Spoznali boste, kako ustvarjati obrazce, kako dostopati do podatkov obrazca z JavaScriptom in kako preprečiti privzete vedenjske vzorce obrazcev s funkcijo preventDefault, da pridobite nadzor nad vnosom podatkov vaših uporabnikov.
Korak-za-korakom navodila
Začnite tako, da v svojem dokumentu ustvarite preprost HTML obrazec. Pazite, da ustrezno vstavite različna vhodna polja in gumb »Pošlji«.
Ko je vaš obrazec v brskalniku vidni, ga lahko preizkusite. Vnesite ime v vhodno polje in pritisnite tipko Enter ali gumb Pošlji. Če vse deluje pravilno, bi morali videti opozorilo s svojim vnešenim imenom.
Da to dosežete, bomo v vaš HTML datoteko dodali skriptno oznako. V tej skripti definirate globalno funkcijo s imenom submitForm, ki sprejema dogodek kot parameter.
V skriptu lahko nastavite dogodek za onsubmit vašega obrazca. To pomeni, da se bo funkcija submitForm klicala, ko bo obrazec oddan. Upoštevajte, da je dogodek vedno na voljo, ko ste v ročaju dogodka.
Eden od pomembnih korakov je preprečevanje privzetega delovanja obrazca z klicem event.preventDefault(). To je pomembno, saj ne želimo, da se stran ponovno naloži po oddaji podatkov.
Zdaj lahko začnemo z branjem podatkov obrazca. Podatki obrazca so na voljo v event.target. S tem je enostavno dostopati do vnesenih informacij.
Za pridobitev podatkov obrazca ustvarite nov objekt s konstruktorjem FormData in mu prenesite element obrazca kot parameter. Po ustvarjanju objekta lahko dostopate do vrednosti vnosov prek metode get.
Npr. z formData.get('firstName') lahko pridobite vrednost polja za vnos z imenom 'firstName'. To vrednost lahko nato uporabite za ustvarjanje sporočila, ki se prikaže uporabniku.
Če želite obrazec razširiti z dodatnim vhodnim poljem, to storite tako: dodajte dodatno polje za priimek z imenom 'lastName'. Nato lahko izvedete podobne korake za pridobitev njegove vrednosti.
Z obema vrednostima lahko nato ustvarite personalizirano sporočilo. Npr. "Pozdravljeni, [Ime] [Priimek]!"
Če ne želite več prikazovati sporočila prek alarma, ampak ga neposredno integrirati v HTML, lahko dodate novo sekcijo v DOM, ki bo sporočilo prikazala kot besedilo. Za to ustvarite div z edinstvenim ID-jem in nastavite njegov innerText na rezultirajoče sporočilo.
Ups: zdaj lahko preizkusite različne variacije, tako da podatke izpišete v konzolo ali jih uporabite za nadaljnje akcije z JavaScriptom, na primer Poštni zahtevek prek pridobi.
To je osnovni način, kako lahko preberete in uporabite podatke obrazca z JavaScriptom. Obstaja veliko načinov, kako to izboljšati, na primer s preverjanjem veljavnosti ali dodatnim obdelovanjem podatkov na strežniku.
Povzetek
V tem vadnem programu ste se naučili, kako lahko z enostavnimi JavaScript funkcijami preberete podatke obrazca. Raziskali ste pomembnost event.preventDefault in videli, kako lahko podatke prikažete v opozorilih ali neposredno v dokumentu. S to osnovo ste dobro pripravljeni oblikovati bolj kompleksne obrazce in ravnanje z njihovimi podatki.
Pogosto zastavljena vprašanja
Kako dostopam do podatkov obrazca?Do podatkov obrazca lahko dostopate z ustvarjanjem novega objekta FormData z new FormData(event.target).
Kaj se zgodi, če ne pokličem event.preventDefault()?Brez event.preventDefault() se izvede privzeto obnašanje brskalnika, kar lahko povzroči ponovno nalaganje strani.
Ali lahko imam več obrazcev na isti strani?Da, lahko imate več obrazcev na isti strani in vsak obrazec lahko ima svojo lastno funkcijo onsubmit.
Kako uporabim podatke obrazca za Fetch zahtevo?Podatke obrazca lahko pretvorite v format JSON in jih nato s Fetch-API-jem pošljete na strežnik.
Ali so JavaScript okviri potrebni za obdelavo obrazca?Ne, ni nujno uporabljati okvire. Obdelavo obrazca lahko v celoti izvedete s čistim JavaScriptom.
