jQuery - Pobierz wartość pól formularza. jQuery - Pobierz wartość pól formularza Wyskakujący formularz kontaktowy PHP

Całkowita ilość zamówienia: 0

").appendTo("body").append(total).css("clear: left"); $("input").change(function(e) ( var total = 0; $("input"). each(function(index, elem) ( total += Number($(elem).val()); )); $("#total").text(total;)); ));

W tym przykładzie w odpowiedzi na zdarzenie zmiany obliczana jest suma wszystkich wartości wprowadzonych w polach wejściowych, a wynik jest wyświetlany w elemencie span, który został wcześniej dodany do dokumentu. Zauważ, że metoda val() służy do pobierania wartości elementów wejściowych.

Odpowiadanie na przesłanie formularza

Bardziej złożone operacje, które można wykonać na formularzach, obejmują zastępowanie domyślnych działań przeglądarki na elementach formularza. Poniżej przedstawiono prosty przykład.

W tym rozdziale pokażę, jak jQuery obsługuje formularze HTML. W szczególności wymienię zdarzenia związane z formularzami oraz metody jQuery, których można użyć do ich kontrolowania; jednak większość tego rozdziału dotyczy wtyczki, która zapewnia świetny mechanizm walidacji wartości wprowadzanych przez użytkownika w formularzu przed przesłaniem ich na serwer. Jeśli kiedykolwiek pisałeś aplikację internetową z formularzami, rozumiesz, że użytkownik może wprowadzać do formularza dowolne dane, więc sprawdzanie poprawności jest ważnym procesem.

Rozpocznę ten rozdział od wprowadzenia skryptu serwera Node.js, którego będziesz używać w tej części książki. Skrypt nie zrobi wiele w tym rozdziale. Pokaże ci tylko wartości danych, które zostały wprowadzone do formularza, ale będziesz pracował więcej z Node.js w dalszych rozdziałach. Podsumowanie tego rozdziału przedstawiono w.

Tabela 13-1: Podsumowanie rozdziału

Zadanie	Rozwiązanie	Wymienianie kolejno
Zainstaluj serwer Node.js	Użyj skryptu dostarczonego w tym rozdziale (i zawartego w źródło towarzyszące tej książce)	,
Reaguj na skupienie zdobyte lub utracone przez element	Użyj metody ostrości i rozmycia
Reaguj na zmiany wartości, które użytkownik wprowadził do elementu	Użyj metody zmiany
Zareaguj (i/lub przerwij) przesyłanie formularza użytkownika	Użyj metody przesyłania	,
Sprawdź poprawność wartości formularza	Użyj wtyczki walidacji
Skonfiguruj wtyczkę walidacji	Przekaż obiekt mapy do metody validate
Zdefiniuj i zastosuj reguły walidacji za pomocą klasy	Użyj metod addClassRules i addClass	, , ,
Zastosuj reguły walidacji bezpośrednio do elementów	Użyj metody reguł	,
Zastosuj reguły walidacji przy użyciu nazw elementów	Dodaj właściwość rules do obiektu options
Zastosuj reguły walidacji za pomocą atrybutów elementu	Zdefiniuj atrybuty, które pasują do poszczególnych kontroli walidacji
Zdefiniuj niestandardowe komunikaty dla reguł stosowanych poprzez nazwy elementów i atrybuty	Dodaj właściwość wiadomości do obiektu opcji ustawionego na obiekt mapy, który definiuje niestandardowe wiadomości	,
Zdefiniuj niestandardowe wiadomości dla reguł stosowanych bezpośrednio do elementów	Dołącz obiekt mapy, który definiuje wiadomości jako argument metody reguł
Utwórz niestandardową kontrolę weryfikacyjną	Użyj metody addMethod	,
Formatuj wiadomości weryfikacyjne	Użyj właściwości highlight , unhighlight , errorElement i errorClass obiektu options

Artykuł, w którym rozważamy różne drogiłatwa ekstrakcja danych z formularze HTML. Mianowicie zapoznajmy się z tym, jak to zrobić za pomocą metody each, a także metod jQuery specjalnie do tego przeznaczonych. Obiekt FormData nie będzie uwzględniony w tym artykule.

jQuery - Pobieranie danych z formularza za pomocą każdej metody

Na przykładzie rozważymy pracę polegającą na wyodrębnianiu danych z elementów formularza przy użyciu metody each.

// utwórz pusty obiekt var $data = (); // przejdź przez wszystkie dane wejściowe, obszar tekstowy i wybierz elementy formularza za pomocą id="myForm " $("#myForm").find ("input, textarea, select").each(function() ( // dodaj nowa właściwość obiektu $data // nazwa właściwości - wartość atrybutu nazwy elementu // wartość właściwości - wartość wartości elementu właściwość $data = $(this.val(); ));

Ta sekwencja działań składa się przynajmniej z utworzenia pustej Obiekt JavaScript, iterowanie elementów formularza przy użyciu metody each i dodawanie do utworzonego obiektu danych odpowiednich wartości określonych atrybutów (nazwy i wartości) elementów.

W razie potrzeby po otrzymaniu danych z formularza możesz dodać różne kontrole. Zapobiegnie to wysyłaniu nieprawidłowych danych na serwer.

Aby przesłać dane na serwer (na przykład za pomocą technologii AJAX), możesz skorzystać z metody jQuery ajax.

// Żądanie AJAX, które zostanie wysłane do serwera: // na: process.php // Metoda POST// zawierające dane $data // sukces to funkcja, która zostanie wywołana po otrzymaniu odpowiedzi z serwera // (sama odpowiedź jest dostępna poprzez argument wyniku) $.ajax(( url: "process.php", type : "post", data: $data, success: function(result) ( // akcje po otrzymaniu odpowiedzi (result) z serwera ) ));

jQuery - Serializacja formularza

W jQuery możesz użyć następujących metod, aby uzyskać wszystkie pola input , textarea i select formularza:

• serializuj()- przeznaczone do serializacji danych formularza do ciągu zapytania. fieldname1=wartość1&fieldname2=wartość2...
• serializuj tablicę()- wykonuje kodowanie elementów formularza do tablicy składającej się z nazw i wartości. [ ( nazwa: "FieldName1", wartość: "Value1" ), ( nazwa: "FieldName2", wartość: "Value2" ), ... ]

Metody serialize i serializeArray jQuery różnią się od siebie tylko formatem wyjściowym. Metoda serialize jest zwykle używana, gdy wynik (dane formularza) musi zostać umieszczony w ciągu żądanie HTTP. Z drugiej strony metoda serializeArray jest używana, gdy dostarczony przez nią wynik zwykle nadal wymaga przetworzenia.

Na przykład, zastanów się, jak możesz iterować po tablicy zwróconej przez metodę serializeArray przy użyciu funkcji each:

// utwórz tablicę obiektów z danych formularza var data = $("#myForm").serializeArray(); // przejdź przez każdą wartość tablicy i wyślij ją w formacie nazwaelementu=wartość do konsoli $.each(data,function()( console.log(this.name+"="+this.value); ));

Jeśli zbierasz dane w celu przekazania ich do metody biblioteki jQuery ajax, to w tym przypadku nie ma znaczenia, której z tych metod użyć. Dlatego Ta metoda może akceptować dane zakodowane za pomocą metody serialize lub serializeArray .

Aby element był serializowany za pomocą metody serialize lub serializeArray, musi on spełniać kryteria "udane kontrole" określone w specyfikacji HTML. Pierwszy stan: schorzenie "udane kontrole" to obecność atrybutu name w elemencie. druga, jeśli formularz nie zostanie przesłany z przyciskiem prześlij, to (nazwa i wartość przycisku) nie zostanie dodany do ciągu lub tablicy zwróconej przez metodę. Trzeci, wartości z elementów pola wyboru I przyciski radiowe(wejścia typu „radio” lub „pole wyboru”) zostaną uwzględnione w zestawie tylko wtedy, gdy są ustawione (zaznaczone). czwarty, elementy, które są wyłączone, nie będą przetwarzane. Tych. aby element był serializowany, musi mieć właściwość disable ustawioną na false (innymi słowy, element nie może mieć wyłączonego atrybutu).

Ostrzeżenie: Metody serialize i serializeArray nie serializują danych z elementów używanych do wybierania plików.

Weźmy przykład, w którym w zależności od wciśniętego przycisku w formularzu będziemy zbierać dane za pomocą metody serialize lub serializeArray. Aby wysłać dane do serwera i otrzymać od niego odpowiedź, użyjemy funkcji jQuery ajax. Odpowiedź pochodząca z serwera zostanie wstawiona do elementu o identyfikatorze form_result .

---

Twoje imię:
Twój numer telefonu:
Twoja wiadomość:

Kod PHP obsługujący żądania ajax na serwerze:

$wartość) ( // dodaj nazwę i wartość klucza $data .= $klucz . " = " . $wartość . "
"; ) // wypisz wynik echo $data; ?>

Powyższy kod po prostu generuje ciąg z danych formularza na serwerze, który następnie zostanie wysłany do klienta (przeglądarki).

Formularze są prawdopodobnie jednym z najbardziej nielubianych elementów na stronie — dopóki ich nie skonfigurujesz
wygląd, a następnie sprawdź, jakie zaniedbania wprowadzili użytkownicy i wyświetl je
informacje o popełnionych błędach, a na koniec przesyłasz dane na serwer za pomocą
poczucie ulgi po ciężkiej pracy. A więc - o tym, co pomoże w
tę samą pracę opowiem.
Na początek warto przypomnieć sobie wydarzenia, z którymi najczęściej będziesz musiał pracować:
change - zmień wartość elementu
wyślij - wysłanie formularza

W jakich przypadkach nam pomogą? Tak, wszystko jest proste – umożliwia śledzenie zmian
obsłużyć zdarzenia, takie jak zmiana pola wyboru lub zmiana przycisku radiowego, zgodnie z wymaganiami
do dynamicznej zmiany kształtu. A najprostszy przykład tego znajduje się na stronie
rejestracji, wybierz kraj, następnie należy wczytać listę dla wybranego kraju
regiony według regionu — lista miast i tak dalej. Prześlij śledzenie będzie wymagane dla
sprawdzenie poprawności wypełnienia formularza, a także przesłanie formularza poprzez
AJAX. Przyjmijmy prostszą formę:

użytkownik Admin

A przykłady pójdą w odwrotnej kolejności, tutaj wysyłam formularz AJAX przez link z
action: $("formularz").submit(function()( // Więcej o AJAX opowiem później $.post($(this).attr("action"), // link do wysyłania danych do $( serialize() // dane formularza);64 // wyłącz domyślną akcję return false;));
Oto pierwsza metoda – serialize() – odpowiada za „zbieranie” danych z formularza w wygodny dla
format przesyłania danych:
name=Ivan&role=Administrator
Istnieje również metoda serializeArray() - reprezentuje ona zebrane dane jako obiekt: [ ( name:"name", value:"Ivan" ), ( name:"role", value:"Admin" ), ]
Teraz dodać do podany kod walidacja niektórych danych: $("forma").submit(function()( if ($(this).find("input").val() == "") ( alert("Wprowadź nazwę użytkownika"); return false ; ) // fragment kodu z wysłaniem // ... ));
Oto kolejna metoda, której często będziemy potrzebować:
val() - pobieranie wartości pierwszego elementu formularza z zaznaczenia
val(wartość) - ustawianie wartości wszystkich elementów formularza z zaznaczenia65
Ta metoda działa świetnie z prawie wszystkimi elementami formularza, z wyjątkiem
radiobutton", aby ustawić wartość w ten sposób, nie zadziała, tutaj będziesz potrzebować
małe obejście: $("input").prop("checked", true) // Oczywiście możesz również użyć metody click() do emulacji wyboru // potrzebnego elementu, ale wywoła to obsługę kliknięć, co nie jest pożądane
Z polami wyboru jest trochę prostsze: $("input ").prop("checked", true)
Sprawdzanie "checked" za pomocą prostego skryptu: $("input ").prop("checked") // lub trochę bardziej wizualnie $("input ").is(":checked")
Teraz wiemy, jak sprawdzić i wysłać formularz AJAX, teraz pozostaje rozwiązać problem z
dynamiczna zmiana kształtu, a do tego mamy już całą niezbędną wiedzę,
tutaj na przykład dodanie listy rozwijanej: $("forma").append(" ");
Co zrobić, jeśli musisz zmienić listę? Są na każdą okazję: // weź listę z góry, zachowaj atrament var $select = $("form select"); // dodaj nowy element do listy rozwijanej $select.append(" menedżer"); // wybierz wymagany element $select.val("Wartość 1"); // lub według numeru indeksu zaczynając od 0 $select.find("option:eq(2)").prop("selected", prawda); // wyczyść listę
Dobra, teraz możemy pracować z formą, pozostaje dopięcie bardziej rozsądnego wyjścia
błędy (tak, tak, zajmij się alert()): if ($(this).find("input").val() == "") ( $(this).find("input") . before( " "); zwróć fałsz; )
Przy ponownym przesyłaniu formularza nie zapomnij usunąć wiadomości pozostałych po poprzednim.
sprawdza: $(this).find(.error").remove()
Teraz możemy połączyć fragmenty kodu i uzyskać następujący wariant: $("form").submit(function()( // czyszczenie błędów $(this).find(".error").remove(); / / sprawdź pola formularza if ($(this).find("input").val() == "") ( $(this).find("input") .before(" "); return false; ) // wszystko w porządku - wyślij żądanie do serwera $.post($(this).attr("action"), // link do którego wysyłamy dane67 $(this).serialize() // dane formularza ); zwróć fałszywe; ));
Teraz warto wrócić do listy zdarzeń formularza i wymienić brakujące:
focus - skup się na elemencie, jest też "skrót" do pracy z tym wydarzeniem
metoda focus(); może być wymagane, jeśli chcesz wyświetlić podpowiedź dla elementu
formularze po najechaniu myszą
blur - fokus opuścił element, metoda blur() z nim pracuje; przydatne, gdy
walidacja formularza po wypełnieniu pól
select - zaznaczenie tekstu w polu tekstowym i metoda wprowadzania select(); Jeśli
rozwiniesz swój WYSIWYG, a potem poznajmy się bardzo blisko
submit - przesłanie formularza metoda submit(); będę używać często

Tak poradziliśmy sobie z „strasznymi” formami, może dam jeszcze kilka
przykłady z życia, ale tak będzie w przyszłych wersjach tego samouczka :)

1. Wtyczka do tworzenia formularzy online "jFormer"

Tworzenie formularzy kontaktowych: opinia, komentowanie, formularz logowania, formularz rejestracyjny ze sprawdzeniem poprawności wpisanych informacji.

2. Formularz rejestracyjny krok po kroku za pomocą jQuery

Zgrabna forma z wypełnieniem krok po kroku. Poniżej znajduje się wskaźnik wypełnienia formularza.

3. Formularz krok po kroku

Wypełnienie formularza w kilku krokach ze sprawdzeniem poprawności wypełnienia.

4. Formularz kontaktowy dla strony

Sprawdzenie poprawności wprowadzonych informacji odbywa się „w locie” przed wysłaniem wiadomości za pomocą javascript.

5. Animowane przełączanie między formularzami w jQuery

Animowane przełączanie z jQuery pomiędzy formularzem logowania do serwisu, formularzem rejestracji i polem odzyskiwania hasła. Na stronie demo kliknij żółty link, aby zobaczyć efekt.

6. Wyskakujący formularz kontaktowy PHP

Dzięki takiemu rozwiązaniu odwiedzający będzie mógł szybko skontaktować się z właścicielem serwisu z dowolnej strony. Na stronie demonstracyjnej kliknij strzałkę poniżej, aby otworzyć formularz.

7. Formularz rejestracyjny PHP przy użyciu jQuery i CSS3

Formularz z potwierdzeniem wprowadzonych informacji.

8. Formularz rejestracyjny PHP w stylu Facebooka

Fajny formularz rejestracyjny zaimplementowany w CSS, PHP i jQuery.

9. Formularz kontaktowy jQuery "SheepIt"

Zaimplementowano możliwość dodawania nowych pól przed wysłaniem wiadomości.

10. Fantazyjny formularz kontaktowy AJAX

ładny schludny Formularz PHP informację zwrotną ze sprawdzeniem poprawności wprowadzonych informacji. Technologie: CSS, PHP, jQuery.

11. System autoryzacji/rejestracji w serwisie

12. Formularz zgłoszeniowy

Z weryfikacją poprawności wypełnienia.

13. Wtyczka jQuery „Kontakt”

Wdrożenie formularza zwrotnego w celu szybkiego wysłania wiadomości.