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:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" language="JavaScript"><!-- function color_name_a_color_code(color_name, type) { var color_name = color_name.toLowerCase(); } // --> </script> |
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:
|
1 2 3 |
var HEXcolor_name2color_code = new Array(); var RGBcolor_name2color_code = new Array(); var colors = new Array(HEXcolor_name2color_code, RGBcolor_name2color_code ); |
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:
|
1 2 3 4 5 6 7 8 9 |
colors[0]['blue'] = '0000FF'; colors[0]['red'] = 'FF0000'; colors[0]['yellow'] = 'FFFF00'; colors[0]['black'] = '000000'; colors[1]['blue'] = 'rgb(0,0,255)'; colors[1]['red'] = 'rgb(255,0,0)'; colors[1]['yellow'] = 'rgb(255,255,0)'; colors[1]['black'] = 'rgb(0,0,0)'; |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
switch(type) { case "HEX" : { if(typeof(colors[0][color_name]) != 'undefined' ) self.document.forms.form.color_code.value = colors[0][color_name]; else self.document.forms.form.color_code.value = ''; break; } case "RGB" : { if(typeof(colors[1][color_name]) != 'undefined' ) self.document.forms.form.color_code.value = colors[1][color_name]; else self.document.forms.form.color_code.value = ''; break; } default : self.document.forms.form.color_code.value = ''; break; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form name="form" action="this"> <pre> Type: <select name="type" onchange="color_name_a_color_code(self.document.forms.form.color_name.value, self.document.forms.form.type.value);"> <option value="HEX">HEX <option value="RGB">RGB </select> (napiště: blue, red, yellow nebo black) color name: <input type="text" name="color_name" onkeyup="color_name_a_color_code(self.document.forms.form.color_name.value, self.document.forms.form.type.value);" /> name code: <input type="text" name="color_code" /> </pre> </form> |
Nakonec se opět můžete podívat na celý kód:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script type="text/javascript" language="JavaScript"><!-- function color_name_a_color_code(color_name, type) { var color_name = color_name.toLowerCase(); var HEXcolor_name2color_code = new Array(); var RGBcolor_name2color_code = new Array(); var colors = new Array(HEXcolor_name2color_code, RGBcolor_name2color_code ); colors[0]['blue'] = '0000FF'; colors[0]['red'] = 'FF0000'; colors[0]['yellow'] = 'FFFF00'; colors[0]['black'] = '000000'; colors[1]['blue'] = 'rgb(0,0,255)'; colors[1]['red'] = 'rgb(255,0,0)'; colors[1]['yellow'] = 'rgb(255,255,0)'; colors[1]['black'] = 'rgb(0,0,0)'; switch(type) { case "HEX" : { if(typeof(colors[0][color_name]) != 'undefined' ) self.document.forms.form.color_code.value = colors[0][color_name]; else self.document.forms.form.color_code.value = ''; break; } case "RGB" : { if(typeof(colors[1][color_name]) != 'undefined' ) self.document.forms.form.color_code.value = colors[1][color_name]; else self.document.forms.form.color_code.value = ''; break; } default : self.document.forms.form.color_code.value = ''; break; } } // --> </script> <form name="form" action="this"> <pre> Type: <select name="type" onchange="color_name_a_color_code(self.document.forms.form.color_name.value, self.document.forms.form.type.value);"> <option value="HEX">HEX <option value="RGB">RGB </select> (napiště: blue, red, yellow nebo black) color name: <input type="text" name="color_name" onkeyup="color_name_a_color_code(self.document.forms.form.color_name.value, self.document.forms.form.type.value);" /> name code: <input type="text" name="color_code" /> </pre> </form> |
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 🙂