Ngayon, ang mga form ay isa sa pinakamahalagang tool para sa pakikipag-ugnayan ng user sa mga web application. Binibigyang-daan ka ng mga form na mag-ayos epektibong pamamahala impormasyon sa site, ang estado ng site mismo, magbigay ng mga serbisyo sa mga kliyente, maglipat ng impormasyon sa ibang mga gumagamit, magbigay ng access sa isang saradong seksyon at marami, higit pa... Samakatuwid, mayroong isang ganap na natural na pagnanais na gawin ang mga form nang higit pa maginhawa at inangkop sa mga tiyak na nuances ng trabaho.

Ang isa sa mga lugar para sa naturang pagpapabuti ay maaaring ang pagpapatupad ng kakayahang interactive, nang hindi nire-reload ang pahina, kontrolin ang bilang ng mga field para sa pagpasok ng data, parehong tumataas at bumababa. Ito ay maaaring maging napaka-maginhawa kung kailangan mong magdagdag ng hindi isa, ngunit ilang mga tala sa database ng application nang sabay-sabay; o kung ang bilang ng mga katulad na data ay hindi alam nang maaga, ang bawat isa ay nangangailangan ng hiwalay na input field (halimbawa, ilang numero ng telepono o mga credit card gumagamit). Sa artikulong ito titingnan natin ang isa sa mga simpleng pagpapatupad tulad ng isang pagkakataon sa pamamagitan ng gamit ang javascript jQuery library.

Sa pinakailalim, maaari kang mag-download ng archive na may mga halimbawa na tinalakay sa artikulong ito.

Pagdaragdag ng bagong field sa form.

Gagawa kami ng bagong field ng form gamit ang .append() na paraan:

$("selector").append("string");

na nagdaragdag ng "string" sa loob ng isang elemento na may tinukoy na "selector", kasama ang idinagdag na string na sumusunod sa kasalukuyang nilalaman.

Kung ating isasaalang-alang kongkretong halimbawa, pagkatapos ay maaaring ganito ito:

Field #1 "/>Magdagdag ng bagong field

Ang addField() function mismo ay maaaring ipatupad tulad ng sumusunod:

< script type= "text/javascript" >function addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id") .slice (3 ) ) 1 ; $("div#add_field_area" ).append ( "Field No. "telnum "" );

Una, gaya ng dati, isinama namin ang jQuery library at pagkatapos ay idineklara ang addField() function. Kinakalkula muna ng function ang numero na kailangang ipasok sa elementong idinaragdag - gamit ang numerong ito, aalisin namin ang mga hindi kinakailangang field. Pagkatapos ay idinaragdag ng addField() sa div#add_field_area ang code ng div#add№ block na may field ng form sa loob, na ang code ay ganap na katulad ng code na "Field No. 1" na nakasaad sa itaas lamang. Ngayon kapag nag-click kami sa pindutang "Magdagdag", makikita natin kung paano agad na lumilitaw ang isang bagong field.

Pagtanggal ng isang partikular na field ng form.

Upang alisin ang mga elemento ng DOM tree, maaari mong gamitin ang remove() na paraan:

$("selector").remove();

na inilapat sa elemento na may tinukoy na "selector". Ipagpalagay namin na bilang default, isang field ang dapat na laging nananatili, lahat ng karagdagang mga ay maaaring tanggalin. Upang gawin ito, sa addField() function, sa parameter line ng .append() method, idaragdag namin ang code para sa field delete button, kapag na-click, tatawagin ang deleteField (id) function, at ang numero ng field na kailangang tanggalin ay ipapasa sa function.

function addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id") .slice (3 ) ) 1 ; $("div#add_field_area" ).append ( "Field No. " telnum " " );

Ang deleteField() function mismo ay maaaring napakasimple:

function na deleteField (id) ($("div#add" id).remove () ; )

Iyon lang. Ngayon, kapag nag-click ka sa pindutan (pulang krus) sa tapat ng napiling field, mawawala ito, at kasama nito ang impormasyong naitala dito.

Pagproseso ng data sa server (php).

Kapag ang isang form ay naglalaman ng maraming mga patlang na may parehong uri ng data, ang tanong ng pagproseso ng data ay natural na lumitaw, halimbawa, bago ito ipadala sa database. Sa halimbawa sa itaas, naresolba ang isyung ito sa pamamagitan ng pagtukoy sa attribute ng pangalan para sa field ng form na may val parameter. Nangangahulugan ito na pagkatapos isumite ang data ng form na ito Paraan ng POST, ang mga halaga ng mga patlang na ito ay ilalagay sa hanay ng $_POST['val'], ang mga elemento kung saan maaaring ulitin sa pamamagitan ng foreach loop(...) (...), Halimbawa:

foreach ($_POST [ "val" ] bilang $value ) ( // iyong code.... )

O, kung kinakailangan, "idikit" ang lahat ng data mula sa mga field na ito ng parehong uri sa isang linya gamit ang implode() function:

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

Pagkatapos ang lahat ng mga halaga ng field na may name="val" ay pagsasama-samahin sa isang string na may isang "vertical bar" delimiter.

Ngunit ito ay server-side processing, na, sa pamamagitan ng paraan, ay mas kanais-nais para sa mga kadahilanang pangseguridad. Ngunit, maaaring lumitaw ang mga pangyayari na pumipilit sa iyong iproseso ang mga ganoong field sa panig ng kliyente: halimbawa, wala kang access sa mga script ng server (gumagamit ka ng ilang uri ng remote form handler), o sa ilang kadahilanan ay hindi mo mababago ang pagpapatakbo ng ang tagapangasiwa ng form sa iyong server. Sa kasong ito, maaari mo ring gamitin ang paraan wika ng javascript, at dahil nagtatrabaho na kami jQuery library- pagkatapos ay patuloy kaming magtatrabaho dito.

Pagproseso ng data sa panig ng kliyente.

Sabihin nating ang aming gawain ay pagsamahin ang lahat ng data ng maraming field na ito sa isang linya na pinaghihiwalay ng isang patayong bar na "|". Sa katunayan, ito ay ipinatupad nang simple.

Una, kailangan nating bahagyang baguhin ang form mismo, lalo na magdagdag ng isang nakatagong field: