Odeslat – JavaScript – Doka

K události odeslání dojde, když uživatel odešle platný formulář. Pokud je formulář neplatný a nelze jej odeslat, k odeslání nedojde.

Jak kouzlíte

Kopírovat odkaz „Jak se píše“ Zkopírováno

Můžete se přihlásit k odesílání a odpovídání, například poděkováním:

document.addEventListener('submit', function () alert('Спасибо, что заполнили форму!')>) document.addEventListener('submit', function () alert('Спасибо, что заполнили форму!') >)   Kopírovat Zkopírováno Kopírování se nezdařilo   

Jak to pochopit

Kopírovat odkaz „Jak porozumět“ Zkopírováno

Uživatel může formulář odeslat (a vytvořit pro nás událost odeslání) několika způsoby, například stisknutím klávesy Enter uvnitř pole nebo kliknutím na tlačítko .

Pokud například z formuláře odstraníme tlačítko, pak se při kliknutí na tlačítko již neprojeví událost odeslání, protože již neexistuje spojení s formulářem. Zároveň bude fungovat stisknutí Enteru uvnitř pole.

    Нажмите Enter в поле:   Или кликните тут  div> form> label for="input-field"> Нажмите Enter в поле: label> input id="input-field" type="text"> form> div> div> button>Или кликните тутbutton> div>   Kopírovat Zkopírováno Kopírování se nezdařilo   

document.addEventListener('submit', function () alert('Случился submit')>) document.addEventListener('submit', function () alert('Случился submit') >)   Kopírovat Zkopírováno Kopírování se nezdařilo   

На практике

Kopírovat odkaz “V praxi” Zkopírováno

Alexey Nikitčenko radí

Kopírovat odkaz „Alexey Nikitchenko radí“ Zkopírováno

Vždy je lepší sledovat odesílání formuláře přihlášením k odběru události odesílání.

To je pohodlnější a správnější, protože odeslání je spojeno s každým prvkem formuláře najednou a uživatel jej může odeslat různými způsoby. Například stisknout klávesu Enter ve vstupním poli a vůbec se nedotknout krásného potvrzovacího tlačítka. Zároveň přihlášení k odběru dalších událostí, například kliknutí na tlačítko, bude s odesláním formuláře spojeno pouze nepřímo.

V níže uvedeném příkladu se přihlásíme k odběru události kliknutí na tlačítko formuláře a zobrazíme zprávu s názvem prvku, na který dojde ke kliknutí. Zkuste stisknout Enter uvnitř vstupního pole ⌨️

const button = document.getElementById('submit-button') button.addEventListener('click', function (event) alert(`Событие поймано на $`)>) const button = document.getElementById('submit-button') button.addEventListener('click', function (event) alert(`Событие поймано на $event.currentTarget>`) >)   Kopírovat Zkopírováno Kopírování se nezdařilo   

I když se tlačítka nedotkneme, událost click na něm stále nastane. Při odeslání formuláře prohlížeč „synteticky“ klikne na tlačítko, pokud je s ním vázána nějaká akce, a ne pro odeslání. Ukazuje se, že pracujeme s jedním prvkem a událost nastává na jiném.

U odeslání je to jiné – rozhodně pracujeme s formulářem jako celkem, nikoli s jednotlivými prvky, a zlepšujeme přístupnost pro uživatele bez myši.