Přenášení hodnot pomocí onclick v Javascriptu

Na diskusi Jak Psát Web (zkráceně DJPW) se uživatel Matess ptal, jak udělat to, že když klikne na odkaz, tak se mu přenese do inputu. Tady máte celé znění dotazu:

Zdravím, mám malou prosbu.
Potřeboval bych poradit jak udělat, že po kliknutí na číslo v tabulce, to číslo přenesu do inputu formuláře.

Něco jako je tady, ale aby se přeneslo jen jedno číslo (to na které kliknu naposledy).
Děkuji za vaše rady.

Já (Marschmallow) jsem mu odpověděl. Nyní Vám to řešení popíšu i zde 🙂

 

Nejprve si sepišme, čeho vlastně chceme docílit

• v HTML budeme mít odkaz a prázdný input
• po kliknutí na ten odkaz se nám obsah toho odkazu automaticky vloží do inputu

Co použijeme?

• JavaScript a jeho prostředky:
• onClick (něco se udělá po kliknutí)
• vložení hodnoty value do inputu

Jdeme na to!

<form name="formular">     
  <input type="text" name="policko" value="">     
  <a href="#">ahoj</a> 
</form>

Máme tu jednoduchý formulář s názvem formular a v něm textový input s názevm policko, pak je tu ještě jednoduchý odkaz směřující na # s textem ahoj.

Teď ten kód (přesněji pouze ten odkaz) obohatíme o špetku JavaScriptu – o událost onClick.

<form name="formular">     
  <input type="text" name="policko" value="">   
  <a href="#" onclick="document.formular.policko.value = 'ahoj'">ahoj</a> 
</form>

Teď si ten kus JavaScriptu rozpitváme:

• onclick – událost, která něco udělá při kliknutí
• document.formular.policko – tím vybereme, s jakou částí kódu (elementem) chceme pracovat
• .value – chceme do elementu vložit obsah (value)
• ahoj – toto je text, který chceme do daného elementu (value) vložit

Nyní si zkuste kód spustit. Po kliknutí na odkaz „ahoj“ by se nám mělo do políčka (inputu) vložit slovo ahoj. Zkusme si kód lehce doplnit:

<form name="formular">
  <input type="text" name="policko" value=""> 
  <a href="#" onclick="document.formular.policko.value = '1'">1</a> 
  <a href="#" onclick="document.formular.policko.value = '2'">2</a> 
  <a href="#" onclick="document.formular.policko.value = '3'">3</a> 
  <a href="#" onclick="document.formular.policko.value = '4'">4</a> 
  <a href="#" onclick="document.formular.policko.value = '5'">5</a> 
</form>

Výše uvedený kód funguje úplně na stejném principu a úplně stejně ;). Akorát jsme přidali více odkazů. Vždy po kliknutí na jeden z odkazů se políčko vymaže a doplní tím novým odkazem – tzn., že když klikneme dvakrát na dvojku a pětkrát na jedničku, bude tam stále pouze to poslední číslo, na které jsme klikli.

Samozřejmě, že to nemusí být jenom číslice, ale i text, znaky, apod…

Vše si teď klidně vyzkoušejte – Živá ukázka.