Podkategorie

Můžete mě sledovat:

Projekty

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

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:

Type:              
                        HEX
                        RGB
                   
                   (napiště: blue, red, yellow nebo black)
color name:        
                   
name code:         

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:

<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:

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:

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:

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:

<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:

<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>