Formuláře:událost a způsob odeslání

submit událost se spouští při odeslání formuláře, obvykle se používá k ověření formuláře před jeho odesláním na server nebo k přerušení odesílání a zpracování v JavaScriptu.

Metoda form.submit() umožňuje zahájit odesílání formuláře z JavaScriptu. Můžeme jej použít k dynamickému vytváření a odesílání vlastních formulářů na server.

Podívejme se na ně podrobněji.

Událost:odeslat

Existují dva hlavní způsoby odeslání formuláře:

  1. První – klikněte na <input type="submit"> nebo <input type="image"> .
  2. Druhý – stiskněte Enter ve vstupním poli.

Obě akce vedou k submit událost na formuláři. Obsluha může zkontrolovat data, a pokud se vyskytnou chyby, ukázat je a zavolat event.preventDefault() , pak se formulář neodešle na server.

Ve formuláři níže:

  1. Přejděte do textového pole a stiskněte Enter .
  2. Klikněte na <input type="submit"> .

Obě akce ukazují alert a formulář se nikam neodesílá kvůli return false :

<form onsubmit="alert('submit!');return false">
 First: Enter in the input field <input type="text" value="text"><br>
 Second: Click "submit": <input type="submit" value="Submit">
</form>
Vztah mezi submit a click

Když je formulář odeslán pomocí Enter ve vstupním poli click spouští událost na <input type="submit"> .

To je docela legrační, protože tam nebylo vůbec žádné kliknutí.

Zde je ukázka:

<form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Metoda:odeslat

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

Poté submit událost se nevygeneruje. Předpokládá se, že pokud programátor zavolá form.submit() , pak skript již provedl všechna související zpracování.

Někdy se to používá k ručnímu vytvoření a odeslání formuláře, jako je tento:

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

form.innerHTML = '<input name="q" value="test">';

// the form must be in the document to submit it
document.body.append(form);

form.submit();