JavaScript - framework jQuery - formularze

Kod:

Ewentualne Objaśnienia:

Mamy tutaj 3 przykłady związane z obsługą formularzy przez jQuery. Nie jest to oczywiście kompletna wiedza na ten temat, będę starał dalej się ją rozwijać w kolejnych "lekcjach".

1 przykład
Czyli znana sprawa - zliczanie ilości wpisanych znaków w textarea oraz blokada wpisania większej ilości znaków niż jakieś tam max. Musimy więc napisać akcję dla zdarzenia keyup naszego pola textarea więc jak widzisz mamy zapis : $("form[@name=artykul] textarea[@name=tresc]").keyup - odwołanie się do danego pola jak widzisz w jQuery jest bardzo proste podajemy nazwę formularza, oraz nazwę pola (tutaj pole typu textarea) oraz wiadomo zdarzenie keyup. Wartość (value) danego elementu formularza jak widzicie uzyskujemy poprze val() natomiast długość takiej (czy innej) wartości jak w "czystym JS" przez length. Sprawdzamy więc czy ilość wpisanych znaków nie jest większa od naszego ustalonego max - jeśli tak to korzystamy z doskonale nam już znanej funkcji substring [jeśli nie pamiętasz jak to działa zajrzyj tutaj ]. Jak widzicie wpisanie nowej wartości odbywa się przez zapis : $(this).val(wpisz_wartosc); gdzie wpisz_wartosc to nasza zmodyfikowana zmienna (czyli wpisany text o ilości znaków równej max). W akapicie (p) o id licznikSlow pojawia się informacja o ilości wpisanych znaków (na podstawie oczywiście działania length). Zauważ, że do wpisywania użyto w jednym przypadku text, a w drugim html - różnica jak sama nazwa wskazuje polega na tym, że ta html interpretuje.. htmla (masło maślane hehe), co też widać na przykładzie. Na końcu sprawdzamy (obliczamy) ile znaków pozostało do wpisania i wyświetlamy informację o tym w akapicie o id ileZostalo. Przykład bardzo prosty i uniwersalny, również w bardzo prosty sposób do  wykonania w "czystym JS" [patrz link].

2 przykład
Tutaj mamy przykład z dodawaniem nowych elementów formularza [ przypomnij sobie przykład 46dhtml_w3c_dom_2.html ]. Mamy sobie link, który ma dodawać pola typu text i ustawiać dla nich wartość z tablicy 'opcje'. Jeśli wykorzystamy wszystkie opcje dodawanie nowych pól powinno być niemożliwe. Również każde takie nowo dodane pole powinno dać się skasować (wtedy też powinno dać się dodać na nowo pole ze skasowaną opcją, ale przyznam że tutaj po prostu nie było sensu się z tym 'babrać' bo nie tego tyczy się ten przykład).
Piszemy więc akcję dla zdarzenia click dla naszego linku i na początku sprawdzamy czy zmienna wybrany nie jest równa ilości elementów naszej tablicy z opcjami [ bo jak wybrany będzie == 5 oznacza, to że wybrano już wszystkie opcje czyli te z indeksami 0,1,2,3,4 ] jeśli tak to pojawia się alert i koniec. W przeciwnym razie dodajmy nowe elementy czyli DIV a w nim input oraz a. Jak widzicie nowy element dodajmy tak jak odnosimy się do istniejącego już elementu czyli jak w przykładzie : $("<div></div>") tzn. nie spowoduje to od razu pojawienia się nowego elementu, ale od tego trzeba zacząć ! Analogicznie dodajemy input [ zwróć uwagę, że od razu podajemy type='text' - to bardzo ważne ponieważ w poprzednich wersjach jQuery nie trzeba było tego robić ! Dalej poprzez attr - dodajemy do naszego pola atrybuty, ja dodałe, name oraz value na podstawie naszej zmiennej wybrany (z tablicy opcje). Następnie tworzymy link, ustalamy jego atrybuty oraz tekst oraz ustalamy dla niego akcję na zdarzenie click - mamy taki zapis : $(this).parent("div").remove(); - poprzez parent (czyli rodzic) odnosimy się do elementu div, w którym znajduje się nasz link a remove wiadomo usuwa tego diva (razem z linkiem i polem input). No i docelowo aby dodać elementy do struktury korzystamy z append [ kojarzysz appendChild ? ] - czyli do nowego elementu div dodajemy nowy input oraz link, a dalej div dodawany jest do naszego formularza. No i trzeba pamiętać, że na końcu jest inkrementowana zmienna wybrany, aby nie dodawać inputów o tej samej wartości cały czas.

3 przykład
Kolejny przykład to prosta walidacja formularza - czyli sprawdzenie wypełnienia pól (text,textarea,select). Piszemy więc pewne działania dla zdarzenia submit naszego formularza - zwróć uwagę na zapis : $('form.sprawdz') - oznacza to, że odnosimy się do formularza o klasie 'sprawdz' więc może ich być więcej, nie trzeba dla każdego pisać osobnej funkcji (analogicznie można odnosić się gdy formularz ma nadany jakieś id, ale jak wiadomo id nie powinno się w kodzie powtarzać). To czy wypełniono nasz formularz poprawnie czy nie zależy od zmiennej poprawność, którą ustalamy na true, a na końcu ją sobie sprawdzimy. No i teraz mamy do czynienia z czymś nowym - pętla, jednak skoro kombinujesz coś z jQuery to zapewne wiesz doskonale czym ona jest - robimy więc pętle po naszym formularzu (sugeruje to this w zapisie wywołania pętli) po jego elementach (text, textarea, select) i jeśli dany element jest niewypełniony to nadajemy mu odpowiednią klasę oraz zapisujemy sobie, że coś jest źle wypełnione (tzn. tutaj w sensie, że nie jest wypełnione), w przeciwnym razie dla pewności usuwamy klasę z tego elementu (bo mogła być dodana w poprzedniej próbie wysłania). Na końcu sprawdzamy wypełnienie i zależnie od tego pojawia się jakiś tam alert.