Formuláře, tlačítka a JavaScript
Jak na JS tlačítka
Říkali jsme si v kapitole HTML formuláře, že máme 3 druhy tlačítek:
type="submit"- odesílá data na server, vede k přenačtení stránky (vhodné pro PHP)type="reset"- maže data formuláře (nebudeme příliš používat)type="button"- konečně tlačítko vhodné pro JS
Pro programování v JS budeme tedy používat výhradně tlačítka typu
<button type="button" id="muj-nazev">Text tlačítka</button>nebo
<input type="button" id="muj-nazev" value="Text tlačítka">
Takovému tlačítku prostě nastavíme funkci (kterou potřebujeme) na událost "click"... a je to.
Pro zvídavé:
Z pohledu UX / UI je "hezké" reagovat i na stisknutí klávesy Enter. Zkuste přijít na to jak.
Jak na automatické odeslání formuláře
Často můžeme v praxi narazit na případ, že "odesílací tlačítko překáží UX / UI".
Například u formuláře na výběr jazyka bych chtěl změnit jazyk webu okamžitě (bez tlačítka):
HTML kód formuláře je
<form class="form-fields" id="mujForm">
<label>Vyber si jazyk stránek</label>
<select name="jazyk" id="jazyk">
<option value="cz">česky</option>
<option value="en">english</option>
<option value="de">deutsch</option>
</select>
</form>
K dosažení efektu použijeme metodu formuláře submit a událost (change) políčka:
document.querySelector("#jazyk").addEventListener("change", function() {
document.querySelector("#mujForm").submit() ;
}