© 2013 All rights reserved.
6

Javasctipt: Automatické doplnění inputu

Pokud nabídnete uživateli HTML formulář pro vyplnění, není špatné, v závislosti na jeho zadaných hodnotách, automaticky některé další hodnoty doplňovat. Podíváme se na to, jak doplnit hodnotu do inputu, která je závislá na více vstupech.

Pokud musí uživatel vyplňovat na webu formulář, měli bychom se mu tuto činnost pokusit co nejvíce zpříjemnit.

Velice jednoduché a efektivní je automatické doplňování údajů na základě jiných údajů, které uživatel již vyplnil.

V tomto návodu si vytvoříme jednoduchý HTML formulář, ve kterém budou dva INPUTu a jeden SELECT. Po vybrání hodnoty v SELECTu a doplnění hodnoty do prvního INPUTu se automaticky doplní text do druhého inputu.

Jak to funguje si můžete jednoduše vyzkoušet na tomto příkladu:


Pro ukázku jsem vybral jednoduchý formulář, ve kterém si v SELECTu můžete vybrat typ výpisu HTML barvy. Po vyplnění prvního INPUTu se automaticky doplní druhý INPUT. Tato hodnota je závislá jak na hodnotě v INPUTu, tak na hodnotě v SELECTu.

Jako první si napíšeme funkci v javasctiptu:

Funkce color_name_a_color_code má dva vstupní parametry. Toto jsou hodnoty, na kterých je doplňovaný input závislý. Hodnotou color_name je hodnota z INPUTU. Pro ošetření ji převedeme na malá písmena.

Ve funkci musíme nadefinovat dvourozměrné pole, které bude obsahovat všechny hodnoty, které se budou automaticky dopňovat:

Máme tedy dvourozměrné pole „colors“ do kterého potřebujeme dostat hodnoty. Dvourozměrné proto, protože INPUT je závislý na dvou hodnotách. K rozlišení budeme používat jejich indexy.

Můžeme pole naplnit hodnotami:

Hodnoty jsou strukturovány tak, aby k nim byl jednoduchý přístup.

Funkce color_name_a_color_code má dva vstupní parametry, jedním z nich je hodnota „type“. Tato hodnota odpovídá NAME ze SELECTu, na kterém je INPUT závislý. Tento SELECT může mít v našem případě dvě různé hodnoty: HEX a RGB. Podle těchto hodnot budeme přistupovat k indexu pole.
Hodnota HEX bude odpovídat 0 a hodnota RGB bude odpovídat 1.

Pro jejich rozlišení můžeme použít konstrukci SWITCH, který bude závislý právě na proměnné „type“.

Další vstupní proměnnou (parametrem) do funkce je „color_name“. Tato hodnota odpovídá vyplněné hodnotě v INPUTu a stejně tak odpovídá druhému indexu v poli „colors“.

Dle těchto dvou vstupních hodnot můžeme jednoduše rozhodnout, zda existuje hodnota. Pokud ano, vypíšeme ji do druhého INPUTu:

Nakonec si musíme napsat HTML formulář. Ve formuláři budou dva inputy a jeden select.
Select bude obsahovat hodnotu onChange, ve které voláme naši funci.
Stejně tak budeme naši funkci volat v prvním inputu v hodnotě onKeyup:

Nakonec se opět můžete podívat na celý kód:

Comments (6)

nefunguje ti to:
Line:2
Char:1
Code:0
Error: Event není definováno.
URL:http://zaachi.com /cs/items/javasctipt-automaticke-do plneni-inputu.html

a jeste tohle:
Line:162
Char:1
Code:0
E rror:self.document.forms.form.color _name.value má hodnotu null nebo není objekt.
URL:http://zaachi.com/cs/i tems/javasctipt-automaticke-doplnen i-inputu.html

celkem mi to ukazalo tech chyb 15

no jo to je hezky, jak ale mam docilit aby mi do inputu dosadil data tahane z mysql.

AJAX

Dobry den,
Javascript je funkcni.
Nefungoval pouze v IE, protoze mi editor spatne zformatoval nektere zdrojove kody a tim padem byla jedna funkce nadefinova vicekrat.

V takovem pripade ale nepouzivejte onKeyUp :-)

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836