jQuery – Az űrlapmezők értékének lekérése. jQuery - Az űrlapmezők értékének lekérése Pop-up PHP kapcsolatfelvételi űrlap

Teljes rendelési mennyiség: 0

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

Ebben a példában a változási eseményre válaszul a rendszer kiszámítja a beviteli mezőkbe beírt összes érték összegét, és az eredmény megjelenik a dokumentumhoz korábban hozzáadott span elemben. Vegye figyelembe, hogy a val() metódus a bemeneti elemek értékeinek lekérésére szolgál.

Válasz az űrlap benyújtására

Az űrlapokon végrehajtható összetettebb műveletek közé tartozik a böngésző alapértelmezett műveleteinek felülbírálása az űrlapelemeken. Az alábbiakban egy egyszerű példa látható.

Ebben a fejezetben bemutatom, hogyan támogatja a jQuery a HTML-űrlapokat. Különösen az űrlapokhoz kapcsolódó eseményeket és a vezérlésükre használható jQuery metódusokat sorolom fel; ennek a fejezetnek a nagy része azonban a beépülő modulról szól, amely nagyszerű mechanizmust biztosít a felhasználó által az űrlapon megadott értékek érvényesítésére, mielőtt azokat elküldené a szervernek. Ha valaha is írt űrlapokat tartalmazó webalkalmazást, akkor tisztában van vele, hogy a felhasználó bármilyen adatot megadhat az űrlapon, ezért az érvényesítés fontos folyamat.

Ezt a fejezetet a Node.js szerverszkript bemutatásával kezdem, amelyet a könyv ezen részében fog használni. A forgatókönyv nem sokat segít ebben a fejezetben. Csak az űrlapba bevitt adatértékeket jeleníti meg, de a későbbi fejezetekben többet fog dolgozni a Node.js-szel. Ennek a fejezetnek az összefoglalója a következő helyen található:

13-1. táblázat: A fejezet összefoglalása

Feladat	Döntés	Felsorolás
Telepítse a Node.js kiszolgálót	Használja az ebben a fejezetben található (és benne található) szkriptet forrás a könyvhöz mellékelve)	,
Reagáljon egy elem által nyert vagy elvesztett fókuszra	Használja a fókusz és az elmosódás módszerét
Reagáljon a felhasználó által egy elembe bevitt értékek változásaira	Használja a változtatási módszert
Reagáljon (és/vagy szakítsa meg) a felhasználói űrlap beküldését	Használja a beküldési módot	,
Érvényesítse az űrlapértékeket	Használjon érvényesítő bővítményt
Az érvényesítési bővítmény konfigurálása	Adja át a térképobjektumot az érvényesítési metódusnak
Érvényesítési szabályok meghatározása és alkalmazása osztály használatával	Használja az addClassRules és addClass metódusokat	, , ,
Az érvényesítési szabályokat közvetlenül az elemekre kell alkalmazni	Használja a szabályok módszerét	,
Érvényesítési szabályok alkalmazása elemnevek használatával	Adja hozzá a szabályok tulajdonságot az opciók objektumhoz
Érvényesítési szabályok alkalmazása elemattribútumok használatával	Határozzon meg olyan attribútumokat, amelyek megfelelnek az egyes érvényesítési ellenőrzéseknek
Egyéni üzenetek meghatározása az elemneveken és attribútumokon keresztül alkalmazott szabályokhoz	Adjon hozzá egy üzenettulajdonságot az egyéni üzeneteket meghatározó leképezési objektum beállítási objektumához	,
Egyéni üzenetek meghatározása az elemekre közvetlenül alkalmazott szabályokhoz	Tartalmazzon egy leképezési objektumot, amely az üzeneteket a szabályok metódusának argumentumaként határozza meg
Hozzon létre egy egyéni érvényesítési ellenőrzést	Használja az addMethod módszert	,
Az érvényesítési üzenetek formázása	Használja az opciók objektum kiemelés , kiemelés megszüntetése , errorElement és errorClass tulajdonságait

Egy cikk, amelyben megvizsgáljuk különböző módokon egyszerű adatkinyerés innen HTML űrlapok. Nevezetesen, ismerkedjünk meg az egyes metódusok, illetve a kifejezetten erre kifejlesztett jQuery metódusokkal, hogyan kell ezt megtenni. A FormData objektumot ebben a cikkben nem vesszük figyelembe.

jQuery – Űrlapadatok lekérése az egyes metódusokkal

Megvizsgáljuk az adatok kinyerését az űrlapelemekből az egyes metódusok használatával egy példa segítségével.

// üres objektum létrehozása var $data = (); // végigfut az összes bemeneten, szövegterületen, és kiválaszthatja az űrlap elemeit az id="myForm " $("#myForm") segítségével.find ("input, textarea, select").each(function() ( // adjon hozzá egy új tulajdonság az objektumhoz $ adat // tulajdonság neve - az elem nevének értéke attribútum // property value - az elem értékének értéke tulajdonság $data = $(this).val(); ));

Ez a műveletsor legalább egy üres létrehozásából áll JavaScript objektum, iterálva az űrlapelemeken az egyes metódusok segítségével, és hozzáadva a létrehozott adatobjektumhoz az elemek bizonyos attribútumainak (név és érték) megfelelő értékeit.

Szükség esetén az űrlap adatainak beérkezése után kiegészítheti különféle ellenőrzések. Ez megakadályozza, hogy érvénytelen adatok kerüljenek a szerverre.

Adatok küldéséhez a szervernek (például AJAX technológia használatával) használhatja a módszert jQuery ajax.

// AJAX kérés, amelyet a szervernek küldenek: // at: process.php // POST módszer// az adatokat tartalmazó $data // a siker egy függvény, amely a szervertől kapott válasz után kerül meghívásra // (maga a válasz az eredmény argumentumán keresztül érhető el) $.ajax(( url: "process.php", írja be : "post", adat: $adat, siker: function(result) ( // műveletek válasz (eredmény) fogadásakor a szervertől ) ));

jQuery – Űrlap sorosítása

A jQuery alkalmazásban a következő módszereket használhatja az összes beviteli , szövegterület és űrlapmező lekéréséhez:

• szerializál()- Úgy tervezték, hogy az űrlapadatokat lekérdezési karakterláncokká szerializálja. mezőnév1=érték1&mezőnév2=érték2...
• serializeArray()- végrehajtja az űrlapelemek kódolását egy nevekből és értékekből álló tömbbe. [ ( név: "FieldName1", érték: "Érték1" ), ( név: "Mezőnév2", érték: "Érték2" ), ... ]

A jQuery serialize és serializeArray metódusai csak a kimeneti formátumban különböznek egymástól. A serialize módszert általában akkor használják, ha az eredményt (űrlapadatokat) egy karakterláncba kell beírni HTTP kérés. A serializeArray metódust viszont akkor használják, ha az általa adott eredményt általában még fel kell dolgozni.

például, fontolja meg, hogyan iterálhatja végig a serializeArray metódus által visszaadott tömböt az egyes függvények használatával:

// objektumok tömbjének létrehozása űrlapadatokból var data = $("#myForm").serializeArray(); // végigfut a tömb minden egyes értékén, és elemnév=érték formátumban adja ki a konzolba $.each(data,function()( console.log(this.name+"="+this.value); ));

Ha adatokat gyűjt annak érdekében, hogy átadja azokat a jQuery könyvtár metódusának ajax, akkor ebben az esetben nem mindegy, hogy ezen módszerek közül melyiket alkalmazzuk. Mert ez a módszer képes elfogadni a serialize metódussal vagy a serializeArray-vel kódolt adatokat.

Ahhoz, hogy egy elemet a serialize vagy serializeArray metódussal szerializáljon, meg kell felelnie a feltételeknek "sikeres ellenőrzések" a HTML specifikációban megadott. Első feltétel "sikeres ellenőrzések" a name attribútum jelenléte az elemen. Második, ha az űrlap beküldése nem küldés gombbal történik, akkor az (a gomb neve és értéke) nem kerül hozzáadásra a metódus által visszaadott karakterlánchoz vagy tömbhöz. Harmadik, értékek az elemekből jelölőnégyzeteketés rádiógombok("rádió" vagy "jelölőnégyzet" típusú bemenet) csak akkor kerül bele a készletbe, ha be vannak jelölve (kipipálva). negyedik, a letiltott elemek nem kerülnek feldolgozásra. Azok. egy elem szerializálásához false-nak kell lennie a letiltott tulajdonságértéknek (más szóval, az elemnek nem lehet tiltott attribútuma).

Figyelmeztetés: A serialize és serializeArray metódusok nem sorosítják a fájlok kiválasztásához használt elemekből származó adatokat.

Vegyünk egy példát, amelyben az űrlapon megnyomott gombtól függően serialize vagy serializeArray metódussal fogunk adatokat gyűjteni. Ahhoz, hogy adatokat küldjünk a szervernek és választ kapjunk onnan, a jQuery ajax függvényt használjuk. A szervertől érkező válasz bekerül a form_result azonosítójú elembe.

---

A neved:
A telefonszámod:
Az üzeneted:

PHP kód, amely kezeli az ajax kérést a szerveren:

$value) (// add hozzá a kulcs nevét és értékét $data .= $key . " = " . $value . "
"; ) // az eredményt adja ki echo $data; ?>

A fenti kód egyszerűen generál egy karakterláncot a kiszolgálón lévő űrlapadatokból, amelyet azután elküld a kliensnek (böngészőnek).

Az űrlapok talán az egyik legellenszenvesebb elem az oldalon – amíg be nem állítja őket
megjelenését, majd ellenőrizze, hogy mit adtak meg hanyag felhasználók, és jelenítse meg azokat
információkat az elkövetett hibákról, és a végén adatokat küld a szervernek
megkönnyebbülés érzése az elvégzett kemény munka miatt. Tehát - arról, hogy mi fog segíteni
ezt a munkát fogom elmondani.
Először is érdemes felidézni azokat az eseményeket, amelyekkel leggyakrabban dolgoznia kell:
változás - módosítsa az elem értékét
benyújt - az űrlap beküldése

Milyen esetekben segítenek nekünk? Igen, minden egyszerű – a változás követése lehetővé teszi
szükség szerint kezelheti az eseményeket, például a kijelölőnégyzet módosítását vagy a választógomb módosítását
dinamikus alakváltozáshoz. És erre a legegyszerűbb példa az oldalon
regisztrációhoz válasszon országot, majd be kell tölteni egy listát a kiválasztott országhoz
régiók, régiók szerint - a városok listája stb. küldése nyomon követésre lesz szükség
az űrlap kitöltésének helyességének ellenőrzése, valamint az űrlapon keresztül történő benyújtás
AJAX. Vegyünk egy egyszerűbb formát:

felhasználó Adminisztrátor

És a példák fordított sorrendben mennek, itt van az AJAX űrlap elküldése a linken keresztül
action: $("form").submit(function()( // Az AJAX-ról később még beszélek $.post($(this).attr("action"), // link adatok küldéséhez $( ez). serialize() // űrlapadatok);64 // az alapértelmezett művelet letiltása return false; ));
Íme az első módszer - a szerializálás () - ez felelős azért, hogy az adatokat kényelmes módon "gyűjtse" az űrlapról
adatátviteli formátum:
name=Ivan&role=Adminisztrátor
Létezik egy serializeArray() metódus is - az összegyűjtött adatokat objektumként ábrázolja: [ ( név:"név", érték:"Ivan" ), ( név:"role", érték:"Admin" ), ]
Most hozzá kell tenni adott kódot néhány adatellenőrzés: $("form").submit(function()( if ($(this).find("input").val() == "") ( alert("Adja meg a felhasználónevet"); return false ; ) // kódrészlet küldéssel // ... ));
Íme egy másik módszer, amelyre gyakran szükségünk lesz:
val() - az első űrlapelem értékének lekérése a kijelölésből
val(érték) - az összes űrlapelem értékének beállítása a kijelölésből65
Ez a módszer remekül működik szinte minden űrlapelemmel, kivéve a
rádiógomb" az érték ilyen módon történő beállításához nem fog működni, itt szüksége lesz
kis megoldás: $("input").prop("checked", true) // Természetesen használhatod a click() metódust is a kívánt elem kiválasztásának // emulálására, de ez meghívja a kattintáskezelőket , ami nem kívánatos
A jelölőnégyzetekkel kicsit egyszerűbb: $("input ").prop("bejelölve", igaz)
"Checked" ellenőrzése egy egyszerű szkripttel: $("input ").prop("checked") // vagy kicsit jobban vizuálisan $("input ").is(":checked")
Most már tudjuk, hogyan kell ellenőrizni és elküldeni egy AJAX-űrlapot, most már csak meg kell oldani a problémát
dinamikus alakváltozás, és ehhez már minden szükséges tudásunk megvan,
itt például egy legördülő lista hozzáadása: $("form").append(" ");
Mi van, ha módosítania kell a listát? Minden alkalomra van: // vedd előre a listát, mentsd el a tintát var $select = $("form select"); // új elem hozzáadása a legördülő listához $select.append(" menedzser"); // válassza ki a kívánt elemet $select.val("Érték 1"); // vagy 0-tól kezdődő indexszámmal $select.find("option:eq(2)").prop("selected", igaz); // törölje a listát
Oké, most már dolgozhatunk az űrlappal, hátra van egy józanabb kimenet rögzítése
hibák (igen, igen, az alert() kezelése): if ($(this).find("input").val() == "") ( $(this).find("input") . before( " "); vissza hamis;)
Az űrlap újbóli beküldésekor ne felejtse el eltávolítani az előzőből megmaradt üzeneteket.
ellenőrzi: $(this).find(.error").remove()
Most kombinálhatjuk a kódrészleteket, és megkapjuk a következő változatot: $("form").submit(function()( // hibatisztítás $(this).find(.error").remove(); / / ellenőrizze az űrlapmezőket if ($(this).find("input").val() == "") ( $(this).find("input") .before(" "); return false; ) // minden rendben - küldjön egy kérést a szervernek $.post($(this).attr("action"), // link, ahova adatokat küldünk67 $(this).serialize() // űrlapadatok ); hamis visszaadás; ));
Most érdemes visszatérni az űrlapesemények listájához, és felsorolni a hiányzó eseményeket:
fókusz - összpontosítson az elemre, van egy "rövidítés" is az eseményhez
fókusz() metódus; szükséges lehet, ha elemleírást kell megjelenítenie az elemhez
űrlapok lebeg
blur - a fókusz elhagyta az elemet, a blur() metódus működik vele; hasznos amikor
űrlap érvényesítése a mezők kitöltésekor
select - szöveg kijelölése a szövegterületen és beviteli mód select(); ha
fejlesztik a WYSIWYG-t, majd nagyon közelről ismerkedjenek meg egymással
beküld - űrlap beküldése submit() metódus; gyakran fogja használni

Így jártunk a "borzasztó" formákkal, talán adok még párat
példák a való életből, de ez lesz az oktatóanyag következő verzióiban :)

1. Beépülő modul online űrlapok létrehozásához "jFormer"

Kapcsolatfelvételi űrlapok létrehozása: Visszacsatolás, kommentálás, bejelentkezési űrlap, regisztrációs űrlap a megadott adatok helyességének ellenőrzésével.

2. Lépésről lépésre regisztrációs űrlap a jQuery használatával

Letisztult forma, lépésről lépésre tölthető. Az alábbiakban az űrlap kitöltésének mutatója látható.

3. Lépésről lépésre űrlap

Az űrlap több lépésben történő kitöltése a kitöltés helyességének ellenőrzésével.

4. Kapcsolatfelvételi űrlap a webhelyhez

A bevitt információk helyességének ellenőrzése "menet közben" történik, mielőtt üzenetet küldene javascript használatával.

5. Animált váltás az űrlapok között a jQuery-n

Animált váltás innen jQuery az oldal bejelentkezési űrlapja, a regisztrációs űrlap és a jelszó-helyreállítási mező között. A bemutató oldalon kattintson a sárga linkre a hatás megtekintéséhez.

6. Előugró PHP kapcsolatfelvételi űrlap

Egy ilyen megoldás segítségével a látogató bármely oldalról gyorsan kapcsolatba léphet az oldal tulajdonosával. A bemutató oldalon kattintson az alábbi nyílra az űrlap megnyitásához.

7. PHP regisztrációs űrlap jQuery és CSS3 használatával

Űrlap a megadott adatok érvényesítésével.

8. Facebook Style PHP regisztrációs űrlap

Szép regisztrációs űrlap CSS, PHP és jQuery segítségével.

9. jQuery "SheepIt" kapcsolatfelvételi űrlap

Megvalósította az új mezők hozzáadásának lehetőségét az üzenet küldése előtt.

10. Fancy AJAX kapcsolatfelvételi űrlap

aranyos ügyes PHP űrlap visszajelzést a megadott adatok helyességének ellenőrzésével. Technológiák: CSS, PHP, jQuery.

11. Engedélyezési / regisztrációs rendszer az oldalon

12. Benyújtási űrlap

A kitöltés helyességének ellenőrzésével.

13. jQuery "Contactable" beépülő modul

Kimenő visszajelzési űrlap megvalósítása az üzenet gyors elküldéséhez.