Odeslání formuláře

Když stránka chce víc údajů najednou, dá jejich textová pole do formuláře: do prvku form. Formulář má tlačítko, které ho odešle, button s type="submit":

<form id="novinky">
    <label for="email">E-mail</label>
    <input id="email">
    <button type="submit">Přihlásit se</button>
</form>
<p id="podekovani"></p>

Uživatel formulář odešle kliknutím na tlačítko, nebo stiskem Enteru v některém z jeho textových polí. Tak či tak dostane formulář událost submit (odeslat), a tam tedy patří obsluha: na formulář, ne na tlačítko.

Když se formulář odesílá, prohlížeč taky sám něco udělá: pošle napsané údaje na server a načte stránku znovu. To je jeho výchozí akce a na stránce, kde se o formulář stará skript, překáží: stránka začne od začátku, všechno napsané zmizí a s ním i to, co ukázala vaše obsluha. Vyzkoušejte si to v náhledu tohoto cvičení: napište něco do textových polí a klikněte na tlačítko. Stránka se načte znovu a textová pole jsou prázdná. Metoda event.preventDefault() řekne prohlížeči, ať svou výchozí akci neprovádí:

const formular = document.querySelector("#novinky");
const vstupEmail = document.querySelector("#email");
const podekovani = document.querySelector("#podekovani");

formular.addEventListener("submit", function (event) {
    event.preventDefault();
    podekovani.textContent = `Děkujeme! Budeme psát na ${vstupEmail.value}.`;
});

Zavolejte ji hned na začátku obsluhy: když pak něco pod ní skončí chybou, stránka se stejně znovu nenačte.

Typické chyby:

• event.preventDefault; bez závorek metodu nezavolá, takže nic neudělá a stránka se znovu načte.
• Tlačítko button ve formuláři formulář odešle, i když nemá type="submit". Když má formulář ještě jiné tlačítko, které ho odesílat nemá, dejte tomu tlačítku type="button".