Plugin JQuery pentru formulare cu structură dinamică. Adăugarea unui câmp fără a reîncărca pagina

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ă ș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

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.

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 un site, starea site-ului în sine, să oferiți servicii clienților, să transferați informații altor utilizatori, să oferiți acces la o secțiune închisă și multe, multe altele... Prin urmare, există o dorința complet naturală de a face forme mai convenabile și adaptate la nuanțe specifice de lucru .

Unul dintre domeniile pentru o astfel de îmbunătățire ar putea fi implementarea capacității de a controla interactiv, fără a reîncărca pagina, numărul de câmpuri pentru introducerea datelor, atât în ​​creștere, cât și în scădere. 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ă numărul de date similare nu este cunoscut în prealabil, fiecare dintre acestea necesită un câmp de introducere separat (de exemplu, mai multe numere de telefon sau Carduri de credit utilizator). În acest articol ne vom uita la unul dintre implementari simple o astfel de 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():

$("selector").append("șir");

care adaugă un „șir” în interiorul unui element 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:

Câmp #1 "/>Adăugați un câmp nou

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" ) .append („Câmp Nr. „telnum”” ) ; )

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 - folosind acest număr, vom șterge ulterior câmpuri inutile. Apoi addField() adaugă la div#add_field_area codul blocului div#add№ cu un câmp de formular în interior, al cărui cod este complet similar cu codul „Câmpul nr. 1” indicat chiar mai sus. Acum, când facem clic pe butonul „Adăugați”, putem vedea cum apare instantaneu un câmp nou.

Ștergerea unui anumit câmp de formular.

Pentru a elimina elementele arborelui DOM, puteți utiliza metoda remove():

$("selector").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, când se face clic, se va apela funcția deleteField (id), iar numărul din câmpul care trebuie șters va fi transmis funcției.

funcția addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append ( "Numărul câmpului " telnum " " ) ; )

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

funcția deleteField (id) ( $("div#add" id).remove () ; )

Asta e tot. 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).

Atunci când un formular conține mai multe câmpuri cu același tip de date, problema procesării datelor apare în mod firesc, de exemplu, înainte de a-l trimite la baza de date. În exemplul de mai sus, această problemă este rezolvată prin specificarea câmpului formularului atributul numelui cu parametrul val. 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:

foreach ($_POST [ "val" ] ca $valoare ) ( // codul dvs..... )

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

$str = imploda ("|" , $_POST [ "val" ] ) ;

Apoi toate valorile câmpurilor cu nume="val" vor fi combinate într-un șir cu delimitatorul „ bară verticală”.

Dar aceasta este procesarea pe partea serverului, 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 (utilizați un fel de manipulator de formulare la distanță) sau dintr-un motiv oarecare nu puteți modifica funcționarea handlerul de formulare de pe serverul dvs. În acest caz, puteți folosi și mijloacele 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-o linie separată de o bară verticală „|”. 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: