JavaScript dla każdego - JavaScript: Formularze





//  wróć  
główna  
dalej  //


Formularze
forms elements value selectedIndex defaultSelected options text

Elementy formularza przy pomocy JavaScriptu mogą odwoływać się do wielu swoich parametrów deklarowanych w HTML-u, czyli tagów.
Oto przykład, jak odwoływać się do konkretnych właściwości elementu formularza:
document.Form.Test.value;
document.forms['Form'].Test.value;
document.Form.elements['Test'].value;
document.forms['Form'].elements['Test'].value;
W powyższej instrukcji indentyfikator Form jest nazwą formularza, Test nazwą elementu tego formularza, do którego chcemy się odwołać, a więc na kod HTML wygląd następująco.
<FORM NAME="Form">
<INPUT TYPE="Test" VALUE="Coś">
<!-- inne elementy takze mogą wystąpić -->
</FORM>
Można zastosować kilka różnych odwołań do elementu Test. W pierwszym przypadku brane są pod uwagę konkretne nazwy (nie mogą być pominięte przy definicji formularza i jego elementu). Można też odwołać się do formularza poprzez obiekt forms, czyli forms['Form'], który zawiera tablicę wszystkich formularzy zawartych na danej stronie www. Analogicznie do elementów formularza poprzez elements['Test']. Jeżeli znaza jest kolejna pozycja formularza w dokumencie HTML lub elementu w tym formularzu, a nie sama nazwa, (wygodne np. przy posiadaniu 10 identycznych elementów), to można odwołać się do nich, używając jego numeru indeksu, analogicznie, jak przy odwołaniach do tablicy. Np. w piątym elemencie pierwszego formularza można zmodyfikować parametr value w taki sposób:
document.forms[0].elements[4].value=nowaLiczba;

Co do listy SELECT to do niej trzeba się odwołać jak wyżej, przy czym do jej kolejnych elementów należy odwołać się poprzez następujący kod:
document.Form.Test.options[x].value;

Gdzie options[x] zawiera tablicę wszystkich pozycji SELECT.
Można też dodawać nowe elementy do istniejącej listy SELECT. Jeżeli dodamy element o indeksie, który jest już przyporządkowany innemu elementowi, to nastąpi podmienienie wszystkich parametrów tego elementu. Jeżeli dodamy element o indeksie nr 10, a lista ma ich tylko 5, to powstaną puste, niezdefiniowane pola, a na miejscu 10 nowy element:
Nowy=new Option(opcjaText,opcjaValue, domyślnieWybrana, wybrana);
NazwaListy.options[x]=Nowy;
W taki sposób należy dodać element do listy. Najpierw definiujemy nowy obiekt jako Option, któremu przypisujemy cztery wartości (kolejność jest ważna): text, value, defaultSelected, selectedIndex. Dwa pierwsze przyjmują dowolne wartości zmiennych łańcuchowych lub liczbowych. Pozostałe dwa mogą przyjąć tylko wartości logiczne. NazwaListy jest po prostu skróconym zapisem odwołania się do listy zgodnie z ww. metodami. Dodanie elementu można przypisać krócej:
NazwaListy.options[x]=new
Option(opcjaText, opcjaValue, domyślnieWybrana, wybrana);

W przypadku, gdy rozwijająca lista znajduje się w tagu formularza, trzeba jeszcze dodatkowo dodać obiekt document oraz obiekt tego formularza. Podobnie, jak to ma miejsce w innych elementach formularza. W przeciwnym razie obiekt forms należy opuścić.