JavaScripti teek: JSDynamicFormContent

Lasin just hiljuti välja uue (vanilla) JavaScripti teegi JSDynamicFormContent, mille ülesandeks on saada formidest kätte andmed dünaamiliselt (ilma veebilehte värskendamata).

Kui ma tegin HTMLi kursuse #7 osa, siis tehes natukene uurimistööd internetis, et näidata formi andmeid samal leheküljel, leidsin ma stackoverflow’st ühe väga toreda küsimuse, mis läks minu probleemiga kokku.

Lootsin avastada mingi one-fit all vastuse, kuid leidmata ühtegi sellist vastust, otsustasin, et seekord vastan ma ise 🙂 .

Üheks motivaatoriks oli kindlasti see, et mul stackoverflow konto oli juba mitmeid kuid lihtsalt eksisteerinud – et kui nüüd ei vasta, siis ma ei tee seda vist kunagi.

Vastates küsimusele avastasin, et sellest väiksest skriptist võiks täiesti saada üks GitHubi projekt. Võtsin härjal sarvist ja tegin asja ära.

Mis on JSDynamicFormContent?

JSDynamicFormContent on puhtas JavaScriptis kirjutatud väikene teek, millega on võimalik saada andmeid formist kätte dünaamiliselt ehk ei ole olemas ühtegi laadimisaega!

Kas JSDynamicFormContent kasutab AJAXit või mõnda muud “serveripoolset” tehnoloogiat?

Ei kasuta, sest JSDynamicFormContent on ainult puhas JavaScript ilma mingisuguseta serveripoolse tehnoloogiga.

Kui aga on vajadus AJAXit lisada, siis see on lihtne, sest JSDynamicFormContent’st saab andmed JS objektina väga kiirelt kätte ning sealt edasi saatmine on juba lapsemäng.

Kuidas JSDynamicFormContent töötab?

Põhimõte on väga lihtne – JSDynamicFormContent käib läbi iga formi sisestuselemendi ja kasutades name atribuuti näitab ta väljastuselemendis formi andmeid.

JSDynamicFormContent tunneb ära kõik sisestuselemendid (kaasa arvatud textarea ja select) koos atribuutidega multiple ja required.

multiple atribuudiga sisestuselemendi väljastab JSDynamicFormContent tavalise nimekirjana ning kui required sisestuselement on täitmata, siis JSDynamicFormContent näitab veateadet.

JSDynamicFormContent saab ka hakkama nende elementidega, millel pole name atribuuti või mille value atribuut on tühi. Selleks prindib JSDynamicFormContent välja kohandatava sõnumi.

Kogu formi andmed on salvestatud JS objekti, mille on võimalik kätte saada läbi getFormData() funktsiooni.

Kuidas JSDynamicFormContent lisada oma veebilehele?

See on väga lihtne.

Kõigepealt lisa enda veebilehte JSDynamicFormContent teek:

<script src="https://raw.githubusercontent.com/OliverPaljak/JSDynamicFormContent/master/dynamic-form-content.min.js" type="text/javascript"></script>

Nüüd lisa enda skripti järgmine käsklus, mis ühendab formi (või formid) JSDynamicFormContent skriptiga:

[code lang=javascript]
new FormContent(sinuForm, inputSelectors, submitButton, outputSection);
[/code]

• sinuForm – HTMLi form
• inputSelectors – sisestuskastide selektorid, millel JSDynamicFormContent loeb andmeid (selektorid pane kirja nagu jQuerys)
• submitButton – HTMLi nupp, mis käivitab JSDynamicFormContent skripti, kuid tegemist ei ole kohustuslikku parameetriga. JSDynamicFormContentist saab andmeid kätte lihtsalt kutsudes välja, kas getFormData() funktsiooni (mis tagastab JS objekti) või getFormattedFormContent() funktsiooni (mis tagastab HTMLiga korrastatud sõne).
• outputSection – HTMLi element, kuhu prinditakse formi andmed. Tegemist ei ole kohustuslikku parameetriga.

Näited JSFormContentist

1. Üksik form – Lähtekood
2. Mitu formi – Lähtekood
3. Konsooli väljastusega (ilma sisestusnuputa ja väljastuselemendita) – Lähtekood

Mis sa ootad, hakka JSFormContenti kohe kasutama!

Jah, tõesti. Tegemist on projektiga, mille litsentsiks on Unlicense, mis põhimõtteliselt vabastab projekti litsentsist 😀 .

Teek on igatahes GitHubis olemas ja sa võid seda kasutada ükskõik kus ja ükskõik millal.

 

Kui sul tekkis asja vastu rohkem huvi või on sul küsimusi, siis anna kommentaarides julgelt teada 🙂 ! Mõne suurema pakkumisega/probleemiga, võid ühendust võtta läbi mu emaili: oliver.paljak@ansiveeb.ee.

---

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.