Plugin JQuery pentru formulare cu structură dinamică
O zi bună, dragi cititori. În unele situații, este necesar să adăugați mai multe date identice printr-un formular de pe site-ul web, de exemplu, completarea unui tabel în baza de date cu numele angajaților companiei, nu acesta este ideea. Veți fi de acord că adăugarea unui câmp și trimiterea de date către server de fiecare dată este o sarcină destul de plictisitoare. Prin urmare în această lecție vom învăța să înmulțim câmpuri de formular și să le facem de câte avem nevoie, iar jQuery ne va ajuta în acest sens. Aruncă o privire la exemplu și vei înțelege imediat ce vreau să spun.
Din moment ce vom face asta când Ajutor jQuery, atunci trebuie să includeți această bibliotecă.
Acum să creăm formularul în sine cu un buton pentru a adăuga un câmp nou și un buton pentru a trimite date:
| Nume |
După cum ați observat, pentru butonul Adăugare câmp am scris parametrul onclick="return add_new_image();". Aceasta înseamnă că atunci când facem clic pe el, ar trebui să executăm o funcție care va adăuga câmpuri suplimentare. Această funcțieîn JavaScript va arăta astfel:
var total = 0 ;
funcția add_new_image() (
total++;
$
("
.attr("id","tr_image_" +total)
.css ((lineHeight:"20px" ))
.adăuga(
$("
.attr("id","td_title_" +total)
.adăuga(
$("" )
.css ((lățimea:"200px" ))
.attr("id","input_title_" +total)
.attr("nume","input_title_" +total)
)
)
.adăuga(
$("
.css ((lățimea:"60px" ))
.adăuga(
$("
"
))
.appendTo("#container_tabel");
}
$(document).ready(funcție() (
add_new_image() ;
});
Să ne uităm la ce se întâmplă aici. Pentru că atunci când adăugăm un câmp nou, avem nevoie ca numele acestora să fie diferite pentru a le putea procesa pe server. În acest scop, a fost creată o variabilă totală, care va crește cu 1 la clic și va fi adăugată la numele câmpului de introducere. Apoi adăugăm la tabel în formular linie nouă
După aceea adăugăm prima coloană
În această coloană adăugăm un câmp de intrare și aplicăm din nou atributele id și name, precum și stilurile
Următoarea acțiune adăugăm o a doua coloană în care vom avea un buton pentru a șterge câmpul. Acest cod ar trebui să funcționeze deja și să adauge câmpuri.
Acum trebuie să ne dăm seama cum să procesăm toate aceste date. Avem handlerul add.php scris în formular și îl vom edita. La adăugarea unui câmp nou, după cum știm, avem noi variabile input_title_1, input_title_2 etc. S-ar părea că totul este simplu, pur și simplu vom număra câte elemente sunt în matricea $_POST și vom folosi o buclă pentru a itera toate valorile.
$n = count($_POST);
pentru ($i =1 ; $i input_title_1
$key => input_title_2
$key => input_title_4
Acum, cunoscând toate valorile cheie, le putem itera folosind o buclă în matricea originală, astfel încât să nu „lipsească” variabilele. ÎN în acest exemplu Printează doar toate valorile, dar poți face ce vrei cu ele. Pentru a crea două câmpuri, trebuie să adăugați următorul cod în JavaScript imediat după ce am terminat de adăugat prima coloană:
Adăugați (
$("
.attr("id","td_name_" +total)
.css ((paddingRight:"5px" ,width:"200px" ))
.adăuga(
$("" )
.css ((lățimea:"200px" ))
.attr("id","nume_" +total)
.attr("nume","nume_" +total)
)
Nu uitați să schimbați parametrii id și nume, altfel veți ajunge cu mai multe câmpuri cu același nume.
1. Formular de contact, care conține câmpul „telefon”. Dacă dorește, utilizatorul poate adăuga câteva câmpuri suplimentare pentru numerele de telefon.
2. Factură pentru plată. Există un set fix de câmpuri, cum ar fi „numele plătitorului” și „numărul contului”. În plus, există un tabel cu poziții. Fiecare poziție constă din următoarele câmpuri: „nume”, „cantitate”, „preț”. Utilizatorul poate adăuga un număr arbitrar de poziții suplimentare.
Să ne uităm la lucrul cu jqDynaForm folosind un astfel de cont ca exemplu. Iată un exemplu de astfel de formă:
Să ne uităm la codul HTML care trebuie pregătit pentru plugin:
Formular simplu demo Factură
Număr: Plătitor:
Pret produse: XVoi arunca toate lucrurile inutile pentru a fi mai clar:
... Câmpuri de formular fix... ... Câmpuri ale unui articol de factură separat...
Acestea. avem o formă de bază cu cadran fix câmpuri. În acest formular plasăm un deținător, un DIV marcat cu atributul „data-holder-for”. Valoarea atributului specifică numele blocului care poate fi inserat aici. Codul HTML al acestui bloc este specificat separat de formular și este marcat cu atributul data-name.
Butoanele pentru adăugarea și eliminarea elementelor, comportamentul de glisare și plasare pentru sortare și transfer sunt complet formate de plugin.
API Pentru a obține valorile câmpurilor de formular trebuie să efectuați următorul apelVar json = $().jqDynaForm("get");
Și va returna un obiect JSON cu următoarea structură:
( „număr”: „123”, „plătitor”: „Fake Incorporated”, „productArray”: [ ( „titlu”: „HP Pavilion g7-2010nr 17,3 inchi”, „preț”: „499,99”, „sumă” : "3" ), ( "titlu": " Samsung Galaxy Tab 2 (7-inch, Wi-Fi)”, „preț”: „248.00”, „suma”: „1” ), ( „titlu”: „HP Envy 4-1030us 14-inch Ultrabook”, „preț” : „779,99”, „suma”: „1” ) ] )
Rețineți că blocurile imbricate care se repetă sunt plasate automat în matrice. Valorile cheie din câmpuri sunt atributul numeluiîn etichetele INPUT și SELECT.
Dacă aveți deja un astfel de obiect JSON gata făcut (generat de un script sau citit dintr-o bază de date), atunci puteți recrea formularul cu un singur apel.
$().jqDynaForm(„set”, json);
După acest apel, vom primi formularul original cu câmpuri completate și blocuri imbricate generate. Desigur, dacă ai dreptul forma originalași blocuri de câmp pregătite.
Un exemplu mai complex De fapt, structura formularului poate fi mult mai complexă, deoarece puteți plasa suporturi nu numai în forma de bază, ci și în interiorul blocurilor dinamice. Deținătorul se poate referi chiar la sine, formând o structură arborescentă recursivă. Iată un exemplu de formă mai complexă:
- Cod de formular HTML arbitrar, fără restricții speciale
- Specificarea strictă a structurii ierarhice de imbricare a blocurilor
- Crearea cuibării pe mai multe niveluri
- Crearea structurilor recursive
- Acțiuni asupra structurii la completarea formularului: Adăugarea unui bloc, ștergerea unui bloc, sortarea și mutarea (glis-and-drop) a unui bloc într-o altă locație permisă.
- Transformarea formei oricărei structuri într-un obiect JSON
- Recrearea unui formular dintr-un obiect JSON
- Creați un formular fără a fi nevoie de programare. Setarea este specificată de atribute speciale
De asemenea, intenționez să adaug următoarele caracteristici:
- Mecanism simplificat pentru validarea câmpului folosind expresii regulate
- Manageri de evenimente externi
De obicei, valorile câmpurilor sunt stocate în baze de date. Cu formele clasice „plate” totul este clar. Acest formular se potrivește perfect într-un singur tabel bază relațională date. Și aici forma este asemănătoare arborelui, iar structura de date, în consecință, este, de asemenea, arborescentă. Există multe opțiuni de stocare, iată câteva:
- Folosind MongoDB (cea mai frumoasă opțiune)
- Stocarea unui obiect JSON ca text într-o bază de date relațională obișnuită. Dar acest lucru nu este întotdeauna acceptabil dacă trebuie să efectuați interogări pe câmpuri individuale de formular. Prin urmare, luați în considerare următoarea opțiune de compromis
- Depozitare pe teren nivel superiorîn câmpurile unei baze de date relaționale și toate câmpurile blocurilor imbricate sub forma unei reprezentări text a obiectelor JSON în câmpuri suplimentare din aceeași înregistrare a bazei de date relaționale.
- Cea mai plictisitoare opțiune este crearea unui bloc de câmpuri pentru fiecare tip masa separataîntr-o bază de date relațională și completați aceste tabele „manual”, rulând în jurul obiectului JSON.
Iată un proces tipic de lucru la un proiect în stil de coșmar. Următoarele cerințe sunt primite de la Client pe o perioadă de timp:
- Faceți un formular pentru a stoca informații despre companie. Acolo aveți nevoie doar de câmpurile „nume”, „oraș”, „stradă”, „casă”.
- Oh! Se dovedește că o firmă poate avea multe sucursale. Faceți posibilă specificarea adresei fiecărei filiale separat în formular.
- Ne-am gândit, am dori, de asemenea, ca fiecare companie să aibă un formular care să poată înregistra mai multe proiecte pe care le-a realizat.
- Vă rugăm să adăugați o persoană de contact pentru fiecare sucursală. Si adaugat? Cum pot adăuga numele unei persoane la fiecare număr de telefon? ... Trebuie să putem cere multe persoane de contactîn fiecare filială și furnizați fiecăruia un număr de telefon separat.
Pentru a evita coșmarul programării în mod constant a tuturor acestor butoane - „adăugați”, „ștergeți”, „transfer”, să nu sufere cu formarea structurilor dinamice, să procesez convenabil valorile câmpului, m-am gândit să creez acest plugin.
Surse Vă avertizez dinainte că pluginul este încă brut. Dar dacă publicul are interes, atunci plănuiesc să îl finalizez și să îl postez versiunile următoare.Pagina proiectului se află la
Există multe moduri și tehnologii care vă permit să adăugați în mod dinamic câmpuri la o pagină (fără a reîncărca). Acestea. utilizatorul face pur și simplu clic pe butonul „adăugați câmp” și un câmp nou pentru introducerea oricăror date este adăugat în formular.
În unele situații, este necesar să adăugați mai multe date identice printr-un formular de pe site-ul web, de exemplu, completarea unui tabel în baza de date cu numele angajaților companiei, nu acesta este ideea. Veți fi de acord că adăugarea unui câmp și trimiterea de date către server de fiecare dată este o sarcină destul de plictisitoare. Prin urmare, în această lecție vom învăța cum să înmulțim câmpuri de formular și să facem câte avem nevoie dintre ele, iar jQuery ne va ajuta în acest sens.
Deoarece vom face acest lucru folosind jQuery, trebuie să includem această bibliotecă.
Acum să creăm formularul în sine cu un buton pentru a adăuga un câmp nou și un buton pentru a trimite date:
| Nume |
După cum ați observat, pentru butonul Adăugare câmp am scris parametrul onclick="return add_new_image();". Aceasta înseamnă că atunci când facem clic pe el, ar trebui să executăm o funcție care va adăuga câmpuri suplimentare. Această funcție în JavaScript ar arăta astfel:
var total = 0; funcția add_new_image())( total++; $("
"))) .appendTo("#table_container"); ) $(document).ready(function() ( add_new_image(); ));Să ne uităm la ce se întâmplă aici. Pentru că atunci când adăugăm un câmp nou, avem nevoie ca numele acestora să fie diferite pentru a le putea procesa pe server. În acest scop, a fost creată o variabilă totală, care va crește cu 1 la clic și va fi adăugată la numele câmpului de introducere. Apoi adăugăm un nou rând la tabel din formular
După aceea adăugăm prima coloană
În această coloană adăugăm un câmp de intrare și aplicăm din nou atributele id și name, precum și stilurile
Următorul pas este să adăugăm o a doua coloană în care vom avea un buton pentru a șterge câmpul. Acest cod ar trebui să funcționeze deja și să adauge câmpuri.
Acum trebuie să ne dăm seama cum să procesăm toate aceste date. Avem handlerul add.php scris în formular și îl vom edita. La adăugarea unui câmp nou, după cum știm, avem noi variabile input_title_1, input_title_2 etc. S-ar părea că totul este simplu, pur și simplu vom număra câte elemente sunt în matricea $_POST și vom folosi o buclă pentru a itera toate valorile.
$n = count($_POST); for($i=1; $i input_title_1
$key => input_title_2
$key => input_title_4
Acum, cunoscând toate valorile cheie, le putem itera folosind o buclă în matricea originală, astfel încât să nu „lipsească” variabilele. Acest exemplu afișează pur și simplu toate valorile, dar puteți face ce doriți cu ele. Pentru a crea două câmpuri, trebuie să adăugați următorul cod în JavaScript imediat după ce am terminat de adăugat prima coloană:
Adăugați($("
Nu uitați să schimbați parametrii id și nume, altfel veți ajunge cu mai multe câmpuri cu același nume.
| Demo | Descarca |
