Leo, fomu ni moja ya zana muhimu zaidi za mwingiliano wa watumiaji na programu za wavuti. Fomu hukuruhusu kupanga usimamizi bora habari kwenye tovuti, hali ya tovuti yenyewe, kutoa huduma kwa wateja, kuhamisha habari kwa watumiaji wengine, kutoa upatikanaji wa sehemu iliyofungwa na mengi zaidi ... Kwa hiyo, kuna tamaa ya asili kabisa ya kufanya fomu zaidi. rahisi na ilichukuliwa kwa nuances maalum ya kazi.

Mojawapo ya maeneo ya uboreshaji kama huo inaweza kuwa utekelezaji wa uwezo wa mwingiliano, bila kupakia upya ukurasa, kudhibiti idadi ya sehemu za kuingiza data, zinazoongezeka na kupungua. Hii inaweza kuwa rahisi sana ikiwa unahitaji kuongeza sio moja, lakini rekodi kadhaa kwenye hifadhidata ya programu mara moja; au ikiwa idadi ya data kama hiyo haijulikani mapema, ambayo kila moja inahitaji sehemu tofauti ya ingizo (kwa mfano, nambari kadhaa za simu au kadi za mkopo mtumiaji). Katika makala hii tutaangalia moja ya utekelezaji rahisi fursa hii kupitia matumizi maktaba za javascript jQuery.

Chini kabisa, unaweza kupakua kumbukumbu na mifano ambayo imejadiliwa katika nakala hii.

Kuongeza uga mpya kwenye fomu.

Tutaunda uga wa fomu mpya kwa kutumia mbinu ya .append():

$("mchaguzi").append("kamba");

ambayo huongeza "kamba" ndani ya kipengele na "kiteuzi" kilichobainishwa, huku mfuatano ulioongezwa ukifuata maudhui yaliyopo.

Ikiwa tutazingatia mfano maalum, basi inaweza kuwa kitu kama hiki:

Sehemu #1 "/>Ongeza sehemu mpya

Kitendaji cha addField() chenyewe kinaweza kutekelezwa kama ifuatavyo:

< script type= "text/javascript" >kazi addField () ( var telnum = parseInt($("#add_field_area" ) .tafuta ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .ongeza ("Sehemu Na. "telnum"" ) ;)

Kwanza, kama kawaida, tunajumuisha maktaba ya jQuery na kisha kutangaza kazi ya addField(). Chaguo la kukokotoa kwanza huhesabu nambari inayohitaji kuingizwa kwenye kipengele kinachoongezwa - kwa kutumia nambari hii, baadaye tutaondoa sehemu zisizo za lazima. Kisha addField() inaongeza kwenye div#add_field_area msimbo wa kizuizi cha div#add№ chenye sehemu ya fomu ndani, msimbo ambao unafanana kabisa na msimbo wa "Sehemu Na. 1" iliyoonyeshwa hapo juu. Sasa tunapobofya kitufe cha "Ongeza", tunaweza kuona jinsi shamba jipya linaonekana mara moja.

Inafuta sehemu maalum ya fomu.

Kuondoa vitu vya mti wa DOM, unaweza kutumia remove() njia:

$("mchaguzi").ondoa();

ambayo inatumika kwa kipengee na "kichaguzi" maalum. Tutachukulia kuwa kwa chaguo-msingi sehemu moja inapaswa kubaki kila wakati, zingine zote za ziada zinaweza kufutwa. Ili kufanya hivyo, katika kazi ya addField (), katika mstari wa parameter ya njia ya .append (), tutaongeza msimbo wa kifungo cha kufuta shamba, unapobofya, kazi ya kufutaField (id) itaitwa, na nambari. ya shamba ambayo inahitaji kufutwa itapitishwa kwa kazi.

kazi addField () ( var telnum = parseInt($("#add_field_area" ) .tafuta ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .ongeza ( "Sehemu Na. " telnum " " ) ;)

DeleteField() kazi yenyewe inaweza kuwa rahisi sana:

kazi deleteField (id) ( $("div#add" id).ondoa () ; )

Ni hayo tu. Sasa, unapobofya kifungo (msalaba nyekundu) kinyume na uwanja uliochaguliwa, itatoweka, na pamoja na habari iliyorekodiwa ndani yake.

Usindikaji wa data kwenye seva (php).

Wakati fomu ina sehemu nyingi zilizo na aina moja ya data, swali la usindikaji wa data kawaida huibuka, kwa mfano, kabla ya kuituma kwenye hifadhidata. Katika mfano hapo juu, suala hili linatatuliwa kwa kutaja sifa ya jina kwa uwanja wa fomu na parameter ya val. Hii ina maana kwamba baada ya kuwasilisha data ya fomu hii Mbinu ya POST, thamani za sehemu hizi zitawekwa katika $_POST['val'] safu, vipengele ambavyo vinaweza kurudiwa kupitia kitanzi cha mbele(...) (...), Kwa mfano:

foreach ($_POST [ "val" ] kama $value ) ( // nambari yako.... )

Au, ikiwa ni lazima, "gundi" data zote kutoka kwa sehemu hizi za aina moja kwenye mstari mmoja kwa kutumia implode() kazi:

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

Kisha thamani zote za sehemu zilizo na jina="val" zitaunganishwa kuwa mfuatano na kikomo cha "pau wima".

Lakini hii ni usindikaji wa upande wa seva, ambayo, kwa njia, inafaa zaidi kwa sababu za usalama. Lakini, hali zinaweza kutokea ambazo zitakulazimisha kuchakata sehemu kama hizo kwa upande wa mteja: kwa mfano, huna ufikiaji wa hati za seva (unatumia aina fulani ya kidhibiti cha fomu ya mbali), au kwa sababu fulani huwezi kubadilisha utendakazi wa. kidhibiti cha fomu kwenye seva yako. Katika kesi hii, unaweza pia kutumia njia lugha ya javascript, na kwa kuwa tayari tunafanya kazi na maktaba ya jQuery, tutaendelea kufanya kazi ndani yake.

Usindikaji wa data kwa upande wa mteja.

Hebu tuseme kazi yetu ni kuchanganya data zote za sehemu hii nyingi kwenye mstari uliotenganishwa na upau wa wima "|". Kwa kweli, hii inatekelezwa kwa urahisi kabisa.

Kwanza, tunahitaji kurekebisha kidogo fomu yenyewe, ambayo ni kuongeza uwanja mmoja uliofichwa: