8. března 2026

Formuláře: událost a metoda submit

Událost submit se spustí, když je formulář odeslán. Obvykle se používá ke kontrole formuláře před jeho odesláním na server nebo ke zrušení odeslání a zpracování formuláře v JavaScriptu.

Metoda formulář.submit() umožňuje vyvolat odeslání formuláře z JavaScriptu. Můžeme ji použít k dynamickému vytvoření a odeslání našich vlastních formulářů na server.

Podívejme se na ně podrobněji.

Událost submit

Formulář lze odeslat dvěma hlavními způsoby:

Prvním je kliknutí na <input type="submit"> nebo <input type="image">.
Druhým je stisknutí Enter na vstupním poli.

Obě akce vyvolají na formuláři událost submit. Handler může zkontrolovat data, a pokud v nich jsou chyby, zobrazit je a zavolat událost.preventDefault(), aby formulář nebyl odeslán na server.

V následujícím formuláři:

Vstupte do textového pole a stiskněte Enter.
Klikněte na <input type="submit">.

Obě akce zobrazí alert a v důsledku return false nebude formulář nikam odeslán:

          <form onsubmit="alert('odeslat!');return false">
  První způsob: klávesa Enter ve vstupním poli <input type="text" value="text"><br>
  Druhý způsob: klikněte na "odeslat": <input type="submit" value="Odeslat">
</form>

Když je formulář odeslán stisknutím Enter na vstupním poli, spustí se událost click na <input type="submit">.

To je docela veselé, protože k žádnému kliknutí nedošlo.

Zde je demo:

          <form onsubmit="return false">
 <input type="text" size="30" value="Vstupte sem a stiskněte Enter">
 <input type="submit" value="Odeslat" onclick="alert('click')">
</form>

Metoda submit

Chceme-li odeslat formulář na server ručně, můžeme zavolat formulář.submit().

Pak událost submit nebude vygenerována. Předpokládá se, že když programátor volá formulář.submit(), skript již zpracoval všechno, co bylo potřeba.

Tato metoda se někdy používá k ručnímu vytvoření a odeslání formuláře, například:

let formulář = document.createElement('form');
formulář.action = 'https://google.com/search';
formulář.method = 'GET';

formulář.innerHTML = '<input name="q" value="test">';

// formulář musí být v dokumentu, abychom jej mohli odeslat
document.body.append(formulář);

formulář.submit();

Úlohy

Modální formulář

Vytvořte funkci zobrazDotaz(html, callback), která zobrazí formulář se zprávou html, vstupním polem a tlačítky OK/STORNO.

Uživatel by měl něco napsat do textového pole a stisknout Enter nebo tlačítko OK, pak bude volána funkce callback(hodnota) s hodnotou, kterou zadal.
Jinak pokud uživatel stiskne Esc nebo STORNO, bude voláno callback(null).

V obou případech bude proces vstupu ukončen a formulář se odstraní.

Požadavky:

Formulář by měl být uprostřed okna.
Formulář je modální. Jinými slovy, není možná žádná interakce se zbytkem stránky, dokud ho uživatel nezavře.
Když se formulář zobrazí, fokus by měl být nastaven na <input> pro uživatele.
Klávesy Tab/Shift+Tab by měly přepínat fokus mezi poli formuláře a neměly by umožnit odchod na jiné prvky stránky.

Příklad použití:

          zobrazDotaz("Zadejte něco<br>...chytrého :)", function(hodnota) {
  alert(hodnota);
});
        

Demo ve vnitřním rámu:

P.S. Zdrojový dokument obsahuje HTML/CSS pro formulář s fixní pozicí, ale učinit ho modálním je už na vás.

Otevřít pískoviště pro úlohu.

Modální okno lze implementovat pomocí poloprůhledného <div id="zakrývající-div">, který zakrývá celé okno, například:

          #zakrývající-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

Protože tento <div> vše překrývá, bude všechna kliknutí dostávat on, ne stránka za ním.

Můžeme také zabránit rolování stránky nastavením body.style.overflowY='hidden'.

Formulář by neměl být v tomto <div>, ale vedle něj, jelikož nechceme, aby měl opacity.

Otevřít řešení na pískovišti.

Mapa tutoriálu

Komentáře

přečtěte si před komentováním…