Există multe moduri și tehnologii de a implementa adăugarea dinamică a câmpurilor pe pagină (fără reîncărcare). Acestea. utilizatorul apasă pur și simplu 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 prin intermediul formularului de pe site, de exemplu, să completați un tabel în baza de date cu numele angajaților companiei, nu acesta este ideea. Adăugarea printr-un câmp și de fiecare dată trimiterea de date către server 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ă le facem cât de multe avem nevoie, iar jQuery ne va ajuta în acest sens.

Din moment ce vom face asta cu Ajutor jQuery, atunci trebuie să includeți această bibliotecă.

Acum să creăm formularul în sine cu un buton pentru adăugarea unui câmp nou și un buton pentru trimiterea datelor:

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 faceți clic pe el, trebuie să executăm o funcție care va adăuga câmpuri suplimentare. Această funcțieîn JavaScript ar arăta astfel:

Să aruncăm o privire la ce se întâmplă aici. Deoarece 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. Pentru a face acest lucru, a fost creată variabila totală, care va crește cu 1 la clic și adăugată la numele câmpului de introducere. Apoi adăugăm la tabel în formular linie nouă și aplicați-i atributul id='tr_image_'+total și stilul lineHeight:'20px'

După aceea adăugăm prima coloană , căruia îi aplicăm și atributul id='td_title_'+total și stilul paddingRight:'5px',width:'200px'

În această coloană, adăugăm un câmp de intrare și aplicăm din nou atributele id și name, precum și stilurile

Urmatorul pas adăugăm o a doua coloană unde 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 î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, doar numărăm câte elemente sunt în matricea $_POST și folosim o buclă pentru a parcurge toate valorile.

$n = count($_POST); pentru($i=1; $i<= $n; $i++){ echo $_POST["input_title_".$i]."
"; }

Dar există un „dar” despre care voi vorbi acum. Să presupunem că ați adăugat patru câmpuri care vor avea, respectiv, numele input_title_1, input_title_2, input_title_3, input_title_4. Dar dintr-o dată decizi să ștergi un câmp, de exemplu, al treilea la rând. Ca rezultat, ne rămâne cu input_title_1, input_title_2, input_title_4. În handler, vom număra elementele matricei, vom obține 3 dintre ele și vom rula o buclă de la 1 la 3. Se va dovedi că vom itera peste input_title_1, input_title_2, input_title_3, iar input_title_4 va rămâne fără atenție . Pentru a evita această situație, vom schimba puțin codul:

$n = count($_POST); $key = array_keys($_POST); pentru($i=0; $i< $n; $i++){ echo $_POST[$key[$i]]."
"; }

Aici, ca și în cazul precedent, am numărat câte elemente avem în matrice și, de asemenea, am scos toate numele cheilor din el și le-am plasat în noua matrice $key. În această matrice, numerele care încep de la 0 servesc deja ca chei:

$key => input_title_1
$key => input_title_2
$key => input_title_4

Acum, cunoscând toate valorile cheilor, putem itera prin ele folosind o buclă în matricea originală, astfel încât să nu „lipsească” variabilele. LA acest exemplu doar scoate toate valorile, dar poți face ce vrei cu ele. Pentru a crea două câmpuri în JavaScript, trebuie să adăugați următorul cod imediat după ce am terminat cu adăugarea primei coloane:

Adăugați($(" ") .attr("id","td_ name_"+total) .css((paddingRight:"5px",width:"200px")) .append($(" ") .css((lățimea:"200px")) .attr("id","nume_"+total) .attr("nume","nume_"+total)))

Doar 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 are un câmp „telefon”. Utilizatorul poate adăuga câteva câmpuri suplimentare pentru telefoane, dacă dorește.

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 este formată 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

Voi arunca tot ce este de prisos pentru a fi mai clar:

Acestea. avem o formă de bază cu un set fix de 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 setat separat de formular și marcat cu atributul data-name.

Butoanele pentru adăugarea, ștergerea elementelor, comportamentul de glisare și plasare pentru sortare și mutare sunt complet personalizabile de plugin.

API

var json = $(<ФОРМА>).jqDynaForm("obține");

Ș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 inchi, Wi-Fi), „preț”: „248,00”, „suma”: „1” ), ( „titlu”: „Ultrabook HP Envy 4-1030us de 14 inchi”, „preț”: „779,99”, „suma”: „1” ) ] )

Rețineți că blocurile imbricate care se repetă sunt plasate automat în matrice. Valori cheie în câmpuri, acesta este atributul nume în Etichete 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 obține formularul original cu câmpuri completate și blocuri imbricate formate. Desigur, dacă aveți forma inițială corectă și blocurile de câmpuri pregătite.

Exemplu mai complicat

Caracteristici

• Cod de formular HTML arbitrar, fără restricții speciale
• Specificarea strictă a structurii ierarhice de imbricare a blocurilor
• Creați imbricare la mai multe niveluri
• Crearea structurilor recursive
• Acțiuni asupra structurii la completarea formularului: Adăugarea unui bloc, ștergerea unui bloc, sortarea și mutarea (trag-and-drop) a unui bloc într-un alt loc 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 de validare a câmpului folosind expresii regulate
• Gestionare de evenimente externe

Lucrul cu JSON

De obicei, valorile câmpurilor sunt stocate în baze de date. Cu formele clasice „plate”, totul este clar. Acest formular este grozav pentru a se potrivi într-o singură înregistrare de tabel bază relațională date. Și aici forma este arborescentă, iar structura de date, respectiv, 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ă interogați câmpuri individuale de formular. Prin urmare, luați în considerare următoarea opțiune de compromis
• câmpuri de depozitare nivel superiorîn câmpurile bazei de date relaționale și toate câmpurile blocurilor imbricate ca reprezentare textuală a obiectelor JSON în câmpuri suplimentare ale aceleiași înregistrări a bazei de date relaționale.
• Cea mai plictisitoare opțiune este de a crea pentru fiecare tip de bloc de câmpuri masa separataîntr-o bază de date relațională și completați aceste tabele „manual” rulând în jurul obiectului JSON.

Ce m-a determinat să creez acest plugin

Iată un flux de lucru tipic pentru un proiect în stil de coșmar. Următoarele cerințe sunt primite de la Client cu o anumită perioadă:

• Realizați un formular pentru a stoca datele companiei. Acolo ai nevoie doar de câmpurile „nume”, „oraș”, „stradă”, „casă”.
• Ai! Se dovedește că o firmă poate avea multe sucursale. Faceți posibilă specificarea adresei fiecărei filiale separat în formular.
• Ne gandeam, ar fi nevoie si fiecare companie pentru a putea nota pe formular cateva proiecte pe care le-a realizat.
• Vă rugăm să adăugați o persoană de contact pentru fiecare sucursală. Si adaugat? Și cum să specificați numele unei persoane pentru fiecare telefon? ... Trebuie să putem seta mai multe persoane de contact în fiecare filială și să indicăm un număr de telefon separat pentru fiecare.

Pentru a evita coșmarul programării constante a tuturor acestor butoane - „adăugați”, „ștergeți”, „mutați”, pentru a nu suferi cu formarea structurilor dinamice, este convenabil să procesăm valorile câmpului, m-am gândit să creez acest plugin .

Surse

Pagina proiectului este la

O zi bună, dragi cititori. În unele situații, este necesar să adăugați mai multe date identice prin intermediul formularului de pe site, de exemplu, să completați un tabel în baza de date cu numele angajaților companiei, nu acesta este ideea. Adăugarea printr-un câmp și de fiecare dată trimiterea de date către server este o sarcină destul de plictisitoare. Prin urmare, în această lecție vom învăța cum să înmulțim câmpurile 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.

Deoarece vom face acest lucru folosind jQuery, trebuie să includem această bibliotecă.

Acum să creăm formularul în sine cu un buton pentru adăugarea unui câmp nou și un buton pentru trimiterea datelor:

După cum ați observat, pentru butonul Adaugă câmp, am scris parametrul onclick="return add_new_image();". Aceasta înseamnă că atunci când faceți clic pe el, trebuie să executăm o funcție care va adăuga câmpuri suplimentare. Această funcție JavaScript va arăta astfel:

Să aruncăm o privire la ce se întâmplă aici. Deoarece 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. Pentru a face acest lucru, a fost creată variabila totală, care va crește cu 1 la clic și adăugată la numele câmpului de introducere. Apoi adăugăm un nou rând la tabel din formular și aplicați-i atributul id="tr_image_"+total și stilul lineHeight:"20px"

După aceea adăugăm prima coloană , căruia îi aplicăm și atributul id="td_title_"+total și stilul paddingRight:"5px",width:"200px"

"padding-dreapta: 5px; lățime: 200px;">

Î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ăugați 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 î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, doar numărăm câte elemente sunt în matricea $_POST și folosim o buclă pentru a parcurge toate valorile.

$n = count($_POST);
pentru ($i =1; $i<= $n ; $i ++){
echo $_POST ["input_title_" .$i ]."
" ;
}

Dar există un „dar” despre care voi vorbi acum. Să presupunem că ați adăugat patru câmpuri care vor avea, respectiv, numele input_title_1, input_title_2, input_title_3, input_title_4. Dar dintr-o dată decizi să ștergi un câmp, de exemplu, al treilea la rând. Ca rezultat, ne rămâne cu input_title_1, input_title_2, input_title_4. În handler, vom număra elementele matricei, vom obține 3 dintre ele și vom rula o buclă de la 1 la 3. Se va dovedi că vom itera peste input_title_1, input_title_2, input_title_3, iar input_title_4 va rămâne fără atenție . Pentru a evita această situație, vom schimba puțin codul:

$n = count($_POST);
$key = array_keys($_POST );
pentru ($i =0 ; $i< $n ; $i ++){
echo $_POST[$key[$i]]."
" ;
}

Aici, ca și în cazul precedent, am numărat câte elemente avem în matrice și, de asemenea, am scos toate numele cheilor din el și le-am plasat în noua matrice $key. În această matrice, numerele care încep de la 0 servesc deja ca chei:

$key => input_title_1
$key => input_title_2
$key => input_title_4

Acum, cunoscând toate valorile cheilor, putem itera prin ele folosind o buclă în matricea originală, astfel încât să nu „lipsească” variabilele. În acest exemplu, toate valorile sunt pur și simplu afișate, dar puteți face ce doriți cu ele. Pentru a crea două câmpuri în JavaScript, trebuie să adăugați următorul cod imediat după ce am terminat cu adăugarea primei coloane:

Adăuga(
$("" )
.attr("id" ,"td_name_" +total )
.css ((paddingRight:"5px" ,width:"200px" ))
.adăuga(
$("" )
.css ((lățimea:"200px" ))
.attr("id" ,"nume_" +total )
.attr("nume" ,"nume_" +total )
)

Doar nu uitați să schimbați parametrii id și nume, altfel veți ajunge cu mai multe câmpuri cu același nume.

Astăzi, formularele sunt unul dintre cele mai importante instrumente pentru interacțiunea utilizatorului cu aplicațiile web. Formularele vă permit să organizați gestionarea eficientă a informațiilor de pe site, starea site-ului în sine, să oferiți servicii clienților, să transferați informații altor utilizatori, să oferiți acces la sectiune inchisași mult, mult mai mult... Prin urmare, există o dorință destul de firească de a face formele mai comode și mai adaptate la nuanțele specifice ale lucrării.

Una dintre direcțiile unei astfel de îmbunătățiri poate fi implementarea posibilității de a gestiona interactiv, fără a reîncărca pagina, numărul de câmpuri pentru introducerea datelor, atât în ​​sus, cât și în jos. Acest lucru poate fi foarte convenabil dacă trebuie să adăugați nu una, ci mai multe înregistrări în baza de date a aplicației simultan; sau dacă cantitatea de date de același tip nu este cunoscută în prealabil, fiecare dintre acestea necesită un câmp de intrare separat (de exemplu, mai multe telefoane sau Carduri de credit utilizator). În acest articol, vom analiza unul dintre implementari simple această oportunitate prin folosind javascript biblioteci jQuery.

În partea de jos, puteți descărca o arhivă cu exemple care sunt discutate în acest articol.

Adăugarea unui câmp nou la formular.

Vom crea un nou câmp de formular folosind metoda .append():

care adaugă un „șir” în interiorul elementului cu „selectorul” specificat, cu șirul adăugat urmând conținutul existent.

Dacă luăm în considerare exemplu concret, atunci ar putea fi ceva de genul acesta:

Creăm un bloc div cu id-ul „add_field_area”, în interiorul căruia vom adăuga blocuri cu id-ul „add№”, care la rândul lor conțin titlul câmpului adăugat și câmpul de intrare în sine. Desigur, puteți adăuga un element fără a-l împacheta într-o etichetă div, dar această structură ne va fi foarte utilă în viitor, când vom implementa capacitatea de a elimina câmpul selectat dacă utilizatorul are nevoie de el.

Mai mult, în partea de jos sub acest câmp plasăm butonul „Adăugați un câmp nou”, atunci când faceți clic, ar trebui să apară un câmp nou pentru introducerea informațiilor. Câmpul va fi creat de evenimentul onClick, folosind funcția addField, care va fi apelată la apăsarea butonului:

Funcția addField() în sine poate fi implementată după cum urmează:

< script type= "text/javascript" >funcția addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ).adăuga("

Mai întâi, ca de obicei, includem biblioteca jQuery și apoi declarăm funcția addField (). Funcția calculează mai întâi numărul care trebuie introdus în elementul adăugat - cu acest număr, vom șterge ulterior câmpurile inutile. Apoi addField() adaugă la div#add_field_area codul blocului div#add# cu câmpul formular în interior, al cărui cod este complet similar cu codul „Field #1” indicat chiar mai sus. Acum, când faceți clic pe butonul „Adăugați”, putem vedea cum apare instantaneu noul câmp.

Eliminarea unui anumit câmp de formular.

Pentru a elimina elemente din arborele DOM, puteți folosi metoda remove():

care se aplică elementului cu „selectorul” specificat. Vom presupune că în mod implicit ar trebui să rămână întotdeauna un câmp, toate celelalte pot fi șterse. Pentru a face acest lucru, în funcția addField(), în linia de parametri a metodei .append(), vom adăuga codul pentru butonul de ștergere a câmpului, la apăsare, se va apela funcția deleteField (id), în timp ce numărul din câmpul de șters va fi transmis funcției.

Funcția deleteField() în sine poate fi extrem de simplă:

De fapt, totul. Acum, când faceți clic pe butonul (cruce roșie) vizavi de câmpul selectat, acesta va dispărea, iar odată cu el și informațiile care au fost înregistrate în el.

Prelucrarea datelor pe server (php).

Când un formular conține mai multe câmpuri cu date de același tip, atunci se pune firesc întrebarea de a procesa datele, de exemplu, înainte de a le trimite la baza de date. În exemplul de mai sus, această problemă este rezolvată prin specificarea atributului name cu parametrul val pentru câmpul formular. Aceasta înseamnă că după trimiterea datelor acestui formular metoda POST, valorile acestor câmpuri vor fi plasate în matricea $_POST['val'], ale cărei elemente pot fi iterate într-o buclă foreach (...) (...), de exemplu:

Sau, dacă este necesar, „lipiți” toate datele acestor câmpuri de același tip într-o singură linie folosind funcția implode ():

Apoi, toate valorile câmpurilor cu nume="val" vor fi combinate într-un șir cu separator „pipe”.

Dar, aceasta este procesarea pe partea de server, care apropo este mai de preferat din motive de securitate. Dar, pot apărea circumstanțe care vă obligă să procesați astfel de câmpuri din partea clientului: de exemplu, nu aveți acces la scripturi de server (se folosește un fel de handler de formulare la distanță) sau nu puteți, dintr-un motiv oarecare, să modificați activitatea handler de formulare pe serverul dvs. În acest caz, puteți utiliza și limbajul javascript, și din moment ce lucrăm deja cu biblioteca jQuery- atunci vom continua să lucrăm în el.

Prelucrarea datelor din partea clientului.

Să presupunem că sarcina noastră este să combinăm toate datele acestui câmp multiplu într-un șir cu o bară verticală „|” separator. De fapt, acest lucru este implementat destul de simplu.

În primul rând, trebuie să modificăm ușor formularul în sine, și anume să adăugăm un câmp ascuns:

Vom pune datele combinate într-o singură linie și le vom trimite la server pentru procesare standard.

În continuare, trebuie să modificați ușor câmpurile multiple de intrare, la care am lucrat mai sus, și anume: puneți un parametru numerotat în atributul name, precum și adăugați un eveniment onBlur="”, care va apela funcția writeFieldsVlues().

Funcția writeFieldsVlues() în sine poate fi declarată astfel:

Adică există un ciclu prin toate elementele de intrare cu id=”val”, din fiecare se extrage valoarea atributului value=”” (ceea ce introducem în câmp), iar dacă această valoare nu este goală, punem este în matricea str. Apoi, matricea este combinată într-un șir cu un separator de bară verticală folosind metoda .join() și șirul rezultat este scris în atributul value="” al câmpului ascuns input#values.

Pentru a finaliza acțiunea, un apel la această funcție trebuie adăugat și la funcția deleteField (), astfel încât ștergerea unui câmp actualizează și informațiile din câmpul ascuns:

Toate. Acum, după ce introduceți o valoare în câmp și scoateți focalizarea de pe aceasta, se formează o linie de date și se scrie într-un câmp ascuns, când câmpul este șters, se întâmplă același lucru. În acest caz, numai valorile nevide ale câmpului nostru multiplu sunt scrise în câmpul ascuns. Acum, datele acestui câmp ascuns pot fi trimise pentru a fi procesate de handlerul dumneavoastră standard pe un server la distanță sau local.

Link-uri de descărcare.

Aici puteți descărca materialele însoțitoare ale articolului.