Dupa cum am spus la inceputul post-ului Link simulator cu jQuery, in aceasta serie de trucuri mai adaug un “episod”. In acest post, vreau sa descriu o metoda excelenta de a adauga in mod dinamic, fara refresh, campuri intr-un formular. Campurile pot fi de orice tip.
In acest exemplu voi adauga un camp de tip text, ce va avea id propriu pentru a putea fi manipulat ulterior dupa nevoie folosind un limbaj server-side la alegere. In acest exemplu voi folosi PHP.
Ca si in articolul precedent, avem nevoie sa includem biblioteca jQuery.
Sa incepem.
Pas 1:
Fie ca folosim un layout bazat pe tabele sau pe div-uri, procedura este la fel.
Trebuie sa definim un container pe care sa il actualizam cu noul camp. De asemenea, trebuie sa definim un link pe post te trigger pentru aceasta actiune.
Mai jos este descris codul HTML cu care vom lucra in continuare. Atentie la parametrii id si name ai elementelor. Sunt importanti deoarece ii vom folosi la manipularea DOM-ului.
fisier: formular.html
<label>Text 1</label>
<input type="text" name="camp[0]"/>
<p id="campuriNoi"></p>
<p>
<a href="#" id="adaugaCamp">Adauga un camp</a>
</p>
Am lasat link-ul Adauga un camp in partea de jos pentru ca vom adauga campurile de jos in sus (evident) si, in acest fel, nu vom fi nevoiti sa folosim scroll-ul vertical pentru a ajunge la el in vederea adaugarii unui nou camp.
Este evident faptul ca trebuie sa adaugati tag-urile form inaintea codului de mai sus si sub link-ul Adauga un camp, un buton de submit.
Pas 2:
A venit momentul sa adaugam magia jQuery in acest mic script.
fisier: code.js
$(document).ready(function(){
$('#adaugaCamp').click(function(){
var i = 1;
i++;
var campNou = '<label>Text ' + i + '</label><input type="text" name="camp[]" />';
$('#campuriNoi').append(campNou);
});
});
Este mandatoriu ca declaratia valiabilei campNou sa se realizeze pe o singura linie.
Acum, ca avem la dispozitie acest mecanism extrem de simplu si de util, a venit timpul sa manipulam datele introduse pe partea de server.
Daca, spre exemplu adaugam 2 campuri text si obtinem astfel 3 campuri text (l-am inclus si pe cel existent), dupa ce vom da submit, in partea de php variabila $_POST['camp'] va contine un vector de forma urmatoare:
Array (
[0] => Text camp 1
[1] => Text camp 2
[2] => Text camp 3
)
Aceste texte, o data obtinute, pot fi manipulate in orice mod dorim.
Un exemplu de mod in care am utilizat acest “truc”, este realizarea unei interfete POS. Intr-o aplicatie dezvoltata recent, am folosit acest mecanism, ajutat si de 2 plugin-uri pentru a realiza o interfata pentru un POS. In aplicatia mea, adaug in acest mod 3 campuri si anume: Nume produs, cantitate si Pret unitar. Unul din cele 2 plugin-uri este LiveQuery si ma ajuta la actualizarea dinamica a DOM-ului, in sensul ca atunci cand adaug un camp nou, ii atasez cel de-al 2-lea plugin, Autocomplete. Apoi, pe server, preiau aceste date, le organizez intr-un bon de casa si le trimit la printat pe casa de marcat.
In urmatorul articol, voi explica cum puteti atasa evenimente acestor campuri nou create.
Sper sa va foloseasca acest mecanism la formulare de toate felurile.
