V tomto návodu se naučíš, jak pomocí JavaScriptu číst a zpracovávat data zadaná uživateli do formulářů. Formulářové prvky jsou klíčovou součástí každé webové stránky, protože umožňují uživatelům zadávat informace. Často se mylně domníváme, že k tomu je zapotřebí složitých frameworků. V tomto článku vám ukážeme, jak pomocí jednoduchého JavaScriptu úspěšně zpracovat formulářová data.

Nejdůležitější poznatky

  • Dovíte se, jak vytvářet formuláře, jak pomocí JavaScriptu získat přístup k formulářovým datům a jak zabránit výchozímu chování formulářů pomocí preventDefault, abyste získali kontrolu nad vstupy vašich uživatelů.

Krok za krokem návod

Začněte vytvořením jednoduchého HTML formuláře ve vašem dokumentu. Ujistěte se, že úspěšně přidáte různá vstupní pole a tlačítko Odeslat.

Efektivní čtení dat z formuláře pomocí JavaScriptu

Až bude váš formulář viditelný v prohlížeči, můžete ho otestovat. Zadejte jméno do vstupního pole a stiskněte klávesu Enter nebo tlačítko Odeslat. Pokud vše funguje správně, měli byste vidět výstražnou zprávu se zadaným jménem.

Efektivní čtení dat z formuláře pomocí JavaScriptu

Pro dosažení tohoto cíle přidáme tag skriptu do vašeho HTML souboru. V tomto skriptu definujete globální funkci pojmenovanou submitForm, která přijímá objekt události jako parametr.

V kódu můžete nastavit událostní handler onsubmit pro váš formulář. To znamená, že funkce submitForm bude volána při odeslání formuláře. Všimněte si, že objekt události je vždy k dispozici, když se nacházíte v rámci událostního handleru.

Efektivní čtení dat z formuláře pomocí JavaScriptu

Jednou z důležitých kroků je zabránit výchozí akci formuláře voláním event.preventDefault(). To je důležité, protože nechceme, aby se stránka znovu načetla po odeslání dat.

Nyní můžeme začít s čtením formulářových dat. Data z formuláře jsou dostupná v event.target. To usnadňuje přístup k zadaným informacím.

Efektivní čtení dat z formuláře pomocí JavaScriptu

Pro získání formulářových dat vytvořte nový objekt s konstruktorem FormData a předejte formulářový prvek jako parametr. Po vytvoření objektu můžete přistupovat k hodnotám vstupů pomocí metody get.

Efektivní zpracování dat formuláře pomocí JavaScriptu

Například s formData.get('firstName') získáte hodnotu vstupního pole s názvem 'firstName'. Tuto hodnotu můžete následně využít k vytvoření zprávy, která se zobrazí uživateli.

Efektivní získávání dat z formuláře pomocí JavaScriptu

Pokud chcete formulář rozšířit o další vstupní pole, postupujte následovně: Přidejte další textové pole pro příjmení s názvem 'lastName'. Poté můžete provést podobné kroky k získání jeho hodnoty.

Efektivní čtení dat z formuláře pomocí JavaScriptu

S oběma hodnotami můžete následně vytvořit personalizovanou zprávu. Například: „Ahoj [Jméno] [Příjmení]!“

Efektivní načítání dat z formuláře pomocí JavaScriptu

Aby se zpráva nezobrazovala již prostřednictvím výstražného okna, ale přímo v HTML, můžete do DOM přidat novou část, která zobrazí zprávu jako text. Vytvořte div s unikátním ID a nastavte jeho innerText na výslednou zprávu.

Efektivní čtení dat z formuláře s JavaScriptem

Nyní můžete vyzkoušet různé varianty tím, že data vypíšete do konzole nebo je použijete pro další JavaScriptové akce, jako například POST požadavek pomocí fetch.

Efektivní zpracování dat formuláře pomocí JavaScriptu

Toto je základní způsob, jak můžeš číst a používat formulářová data pomocí JavaScriptu. Existuje mnoho dalších možností, jak tento proces vylepšit, například přidáním ověřování nebo dalším zpracováním dat na serveru.

Shrnutí

V tomto tutoriálu jsi se naučil(a), jak pomocí jednoduchých JavaScriptových funkcí číst formulářová data. Prozkoumal(a) jsi důležitost event.preventDefault a viděl(a), jak lze data vložit jak do oken s upozorněními, tak přímo do dokumentu. S touto základní znalostí jsi dobře připraven(a) na návrh složitějších formulářů a zpracování jejich dat.

Časté dotazy

Jak přistupuji k formulářovým datům?Můžeš přistupovat k formulářovým datům vytvořením nového objektu FormData s new FormData(event.target).

Co se stane, pokud nenavolám event.preventDefault()?Bez volání event.preventDefault() bude vykonáno výchozí chování prohlížeče, což může vést k obnovení stránky.

Mohu mít na jedné stránce více formulářů?Ano, můžeš mít na jedné stránce více formulářů a každý formulář může mít vlastní onsubmit funkci.

Jak mohu formulářová data použít pro Fetch-Request?Můžeš převést formulářová data do formátu JSON a poté je pomocí Fetch-API odeslat na server.

Jsou JavaScriptová frameworky pro zpracování formulářů nutné?Ne, není nutné používat frameworky. Zpracování formulářů můžeš provést zcela pomocí čistého JavaScriptu.