Kështu që sot më duhej të bëja një veçori në projektin tim të ri. Projekti është mjaft i gjerë për të mbuluar çfarë dhe si, dhe për këtë arsye unë do t'ju tregoj për thelbin e kësaj "tipari".
Detyra ishte që administratori të mund të fshinte përdoruesit nga baza e të dhënave. Pra, vendosim parametrat e kërkimit dhe skripti php na jep një listë të përdoruesve. Përballë çdo përdoruesi ka një kuti kontrolli, në mënyrë që të mund të zgjidhni dhe fshini.
Por nuk është kaq e thjeshtë. Detyra ishte që butoni "fshij" të bëhej joaktiv dhe të bëhej aktiv vetëm në momentin kur zgjidhej të paktën një kuti. Natyrisht, përbindëshat JavaScript do të thonë: "Po, ka dy gishta në asfalt". Por unë nuk jam një përbindësh JS dhe përdor programimin në këtë gjuhë vetëm kur dua diçka të tillë, për lehtësi.
Pra, sa i mirë isha, hyra në rrjet dhe Yandex dhe Google dhe të gjitha llojet e portaleve grumbulluan në shfletuesin tim shumë kode të ndryshme nga të cilat truri im ende verbonte pikërisht atë që më duhej. Siç doli, në të vërtetë nuk ka shembuj normalë (punë) në rrjet, dhe për këtë arsye, në mënyrë që një tjetër si unë të mos më shpërthejë trurin, vendosa të postoj një shembull funksional të kodit JavaScript.
Unë mendoj se zbatimi i HTML nuk është i vështirë për t'u kuptuar, por gjithsesi do ta shtoj:
Të nderuar vizitorë të faqes, duke bërë pyetje të tilla si "Si ta bashkëngjitni shportën tuaj të blerjeve në sajt?" etj. Unë nuk bëj zgjidhje të gatshme, unë përshkruaj logjikën e zbatimit, për çdo faqe individuale do t'ju duhet të shtoni gjëra të caktuara në çdo rast, kështu që nëse vërtet keni nevojë të vidhosni ose bashkëngjitni diçka, unë ofroj shërbime me pagesë dhe falas për konsultime dhe faqet e finalizimit. Shkruani në formularin e komenteve në krye të faqes, unë do t'u përgjigjem të gjithëve.
Butoni i dorëzimit i çaktivizuar (atributi DISABLED)
Ndonjëherë në sit është e nevojshme të krijoni një formular në të cilin përdoruesi fut ndonjë të dhënë. Mund të ketë çdo numër fushash në formë, por ka gjithmonë fusha të detyrueshme. Si të kontrolloni nëse përdoruesi ka plotësuar fushën e kërkuar apo jo. Ka dy mënyra:
- Kontrollimi në mbajtës, d.m.th. përdoruesi plotëson fushat e kërkuara, dorëzon formularin dhe më pas procesori kontrollon fushat e kërkuara dhe nëse ndonjë fushë nuk plotësohet, e kthen përdoruesin përsëri. Gjithçka është e thjeshtë, por nevojitet një mekanizëm për të transferuar vlerat e fushave tashmë të mbushura përsëri në formular, i cili mund të zbatohet duke përdorur sesione, por kjo nuk është shumë e përshtatshme.
- Kontrollimi me metoda JavaScript është shumë më i thjeshtë (për sa i përket mënyrës se si funksionon vetë forma). Ne vendosim çdo fushë një ngjarje onchange ose ndonjë tjetër që i përgjigjet veprimit të përdoruesit (epo, jo onmouseover, sigurisht, megjithëse ndoshta mund të bëhet edhe qesharake ...), pas së cilës funksioni që kemi shkruar do të kontrollojë nëse fushat e kërkuara janë plotësuar dhe aktivizoni ose çaktivizoni butonin e dërgimit.
Opsioni i parë lidhet më shumë me seksionin PHP, kështu që nuk do të merret parasysh për momentin. Le të shqyrtojmë të dytën në më shumë detaje. Gjëja e parë që na nevojitet është vetë forma:
Siç mund ta shihni, butoni Submit ka një atribut të çaktivizuar të vendosur në disabled. Gjithashtu, çdo fushë formulari ka një ngjarje onchange që thërret funksionin EnableButton (). Si është ky funksion? Le të themi se fushat e kërkuara janë fusha1 dhe fusha3, atëherë funksioni EnableButton () do të duket kështu:
funksionin EnableButton ()
{
me (dokument.formular.form1)
{
nëse(field1.value! = "" && field2.value! = '')
{
disable_button.disabled = i rremë;
}
tjetër
{
disable_button.disabled = e vërtetë;
}
}
}
Fatkeqësisht, nuk kam gjetur një analog PHP të funksionit bosh () në JavaScript, kështu që vlerat e fushës duhet të krahasohen me një varg bosh. Një gjë tjetër që ia vlen t'i kushtohet vëmendje është deklarata me (dokument.forma.form1). Për ata që nuk janë të njohur me JavaScript - shprehja në kllapa e deklaratës with do t'u shtohet të gjitha objekteve, gjë që redukton ndjeshëm shkrimin e funksionit. Pa EnableButton () do të dukej kështu:
funksionin EnableButton ()
{
nëse(document.forms.form1.field1.value! = "" && document.forms.form1.field2.value! = '')
{
i rremë;
}
tjetër
{
dokument.forma.form1.disable_button.disabled = e vërtetë;
}
}
Dakord - mjaft i rëndë.
Në vazhdim, vlen të përmendet se atributi me aftësi të kufizuara mund të përdoret në çdo element të formës. Shembull - plotësimi i informacionit për kompaninë - adresa ligjore dhe postare. Dy fusha për dy adresa, megjithatë, mund të shtoni një kuti kontrolli (- përputhet me atë ligjore), duke e shënuar të cilën, përdoruesi do të tregojë se fusha e adresës postare nuk ka nevojë të përpunohet dhe atributi i çaktivizuar mund t'i shtohet asaj.
) u ngrit pyetja se do të ishte mirë që butonat e formularit të dërguar në server të vendosnin veçorinë disabled = "disabled".
Sidoqoftë, ata ende nuk e kanë kuptuar pse është e nevojshme kjo dhe si ta bëjnë atë njësoj. Duket se mund të ishte më e thjeshtë dhe për çfarë mund të flisni fare këtu, por jo - në fakt, gjithçka doli të ishte jo aq e parëndësishme. Vërej menjëherë se arsyetimi i mëposhtëm vlen për të dy llojet e formularëve: të dyja të dërguara përmes SUBMIT të rregullt dhe përmes AJAX.
Pse duhet t'i bëni butonat joaktivë
- Për ta bërë të qartë për përdoruesin se ai tashmë ka klikuar mbi butonin dhe se formulari është duke u dorëzuar
- Në mënyrë që serveri të mos ngarkohet me kërkesa të panevojshme dhe të zvogëlojë gjasat e ndonjë gabimi
Është gjithashtu e qartë se kërkesat e panevojshme mund të parandalohen duke varur disa klasë = "form_is_loading" në formular dhe duke kontrolluar praninë e kësaj klase në çdo paraqitje. Por pse bëhen këto kontrolle kur mund të bëni pa to thjesht duke e bërë butonin joaktiv?
Si t'i bëni butonat joaktivë
Ky opsion i thjeshtë, i propozuar në temat e sipërpërmendura, rezulton të jetë i pamjaftueshëm dhe jofunksional.Pse nuk mjafton vetëm ta bëni butonin e shtypur joaktiv:
- Dorëzimi i një formulari mund të ndodhë edhe duke shtypur Enter. Prandaj, përpunimi i butonave duhet të varet në ngjarjen onsubmit të vetë formularit. Për më tepër, një formë mund të ketë disa butona dhe do të ishte logjike t'i bënin të gjithë joaktivë, dhe jo vetëm butonin që u klikua.
- Nëse, pas dorëzimit të formularit, kthehemi në faqen me formularin (duke përdorur butonin "Kthehu" në shfletues), ruajtja në memorie do të funksionojë: do të hasim butona joaktivë dhe nuk do të jemi në gjendje ta dorëzojmë përsëri formularin - pa një detyrim. ringarkoni faqen me humbjen e të gjitha fushave të mbushura më parë (Kthimi në formularin e kërkimit nga faqja e rezultateve të kërkimit këtu është një shembull i gjallë).
- Nëse formulari ka disa butona (për shembull, "Dërgo" dhe "Anulo"), atëherë nuk do të jemi në gjendje t'i tregojmë serverit se cili buton është shtypur: një buton joaktiv nuk transmeton emrin dhe vlerën e tij - edhe nëse e bëjmë atë joaktive nga ngjarja onsubmit
Shkurtimisht, skenari është si më poshtë.
- Bëjini butonat joaktivë nga ngjarja onsubmit të formularit
- Ne i kthejmë butonat në gjendjen aktive përpara se të largohemi nga faqja nga ngjarja window.onunload
- Çdo buton formulari në ngjarjen onclick duhet të krijojë një fushë të fshehur me të njëjtin emër, përmes së cilës do t'i kalojë vlerën e saj serverit
//// skedar html ////////////////////////////////////////////////////////////////// //////////////////////
//// skedar js ////////////////////////////////////////////////////////////// //////////////////////////Tema e artikullit të sotëm do të jetë formulari plotësues, përkatësisht vërtetimi i vogël i tij. Për të qenë më të saktë, ky nuk është vërtet vërtetim, sepse nuk do të ketë vërtetim të hyrjes. Kjo metodë e bën butonin "Dërgo" joaktiv derisa të plotësohen fushat e kërkuara në formular.
Bllokimi i butonit të dërgimit ndërsa fushat janë bosh arrihet me jQuery... Do të na ndihmojë një skenar i vogël, i cili do të realizojë planet tona. Le të bëjmë një formë si kjo me një buton joaktiv.
Përfshirë bibliotekën jQuery
Hapi i parë është të lidheni me kokën përpara mbylljes kokë ose në bodrumin përballë mbylljes trupi bibliotekat jQuery.
Këtu duhet të jeni shumë të kujdesshëm, ndonjëherë biblioteka tashmë është lidhur më herët dhe rilidhja e saj do të çojë në një konflikt dhe mosfunksionim të skenarit. Pra, nëse nuk funksionon, përpiquni të mos e përfshini këtë bibliotekë ose të mos ndryshoni vendndodhjen e lidhjes.
Dërgo skriptin e bllokimit të butonit
Funksioni checkParams () (emri var = $ ("# emri"). Val (); var email = $ ("# email"). Val (); var telefon = $ ("# telefon"). Val (); nëse (emri.gjatësia! = 0 && email.gjatësia! = 0 && telefon.gjatësia! = 0) ($ ("# dorëzo"). removeAttr ("disaktivizuar");) tjetër ($ ("# dorëzo"). attr ("i paaftë", "i paaftë");))
Në rreshtat 2,3,4 vendosim fushat tona, përkatësisht ID-të e tyre në formën e ardhshme dhe u caktojmë emra që skripti të funksionojë. Siç tha ai, janë tre të tilla, kështu që nëse është e nevojshme, mund t'i hiqni ato shtesë ose të shtoni ato të nevojshme.
Rreshti i 6-të përmban parametra sipas numrit të karaktereve në fusha. Ky kod specifikon parametrin != 0 , pra, nëse nuk ka asgjë në fushë, nuk do ta zhbllokojë butonin, nëse vozitni në të paktën një karakter, kjo fushë konsiderohet e mbushur. Dhe siç mund ta shihni, ne kemi tre fusha, dhe secila ka të njëjtin parametër.
Nëse keni nevojë të specifikoni një numër minimal të ndryshëm karakteresh, atëherë duhet të ndryshoni pak kodin. Nëse thjesht zëvendësoni "0" me numrin e dëshiruar, atëherë nuk do të bëjë asgjë. Që gjithçka të funksionojë, duhet të zëvendësoni:
! = 0 deri> = 7
Kjo do të thotë, ne vendosëm parametrin që të lejojë dërgimin nëse fusha është më e madhe se 7 karaktere. Kjo do të thotë, butoni nuk aktivizohet derisa të ketë 7 ose më shumë karaktere në fushën ku është specifikuar ky parametër. Le të vendosim parametrat e mëposhtëm. Për emrin 2 karaktere, për postën - 5 dhe numrin 7. Rreshti i përfunduar 6 i skenarit duket kështu:
Nëse (emri.gjatësia> = 2 && email.length> = 5 && telefoni.gjatësia> = 7) (
Për ata që janë të interesuar për pyetjen - Si e specifikoni numrin maksimal të karaktereve?... Përgjigje: në kodin HTML, në fushë hyrje shkruani atributin
Gjatësia maksimale = "15"
i cili vendos kufirin në 15 karaktere. Thjesht shkruani numrin tuaj.
Rreshti i 7-të dhe i 9-të tregojnë ID-në e butonit tonë të ardhshëm - "DËRGO" nga formulari, i cili do të zhbllokohet nëse plotësohen kushtet. Në këtë rast, është - #paraqisni.
Kodi HTML
Tani le të futim një formë të thjeshtë me tre fusha. Formulari ynë do të dërgojë emrin, postën dhe numrin e telefonit. Ju mund të përdorni formularin tuaj.
Që gjithçka të funksionojë, së pari - duhet të shtoni një ngjarje në fushat e kërkuara -
Onkeyup = "checkParams ()"
e cila nis skenarin tonë.
Së dyti, shtoni atributin e çaktivizuar në buton, i cili do të anulohet nga skripti nëse plotësohen fushat e kërkuara.
E treta nga fushat hyrje duhet të ketë një ID, e cila tregohet edhe në skenar, siç thashë më lart.
Kjo është e gjithë rruga. Nuk është e vështirë, megjithëse artikulli doli të ishte jo i vogël. Nëse lexoni me kujdes dhe kuptoni gjithçka, atëherë nuk duhet të keni ndonjë vështirësi.
Kjo metodë më ndihmoi kur krijoja forma që përdorin ajax dhe dërgoni një letër pa ringarkuar faqen, pavarësisht nëse fushat janë të mbushura. Kjo do të thotë, nëse një person fillon të shtypë thjesht butonin, atëherë do të dërgohen letra boshe, dhe kështu butoni bllokohet dhe nuk e lejon këtë.
Kjo është e gjitha, faleminderit për vëmendjen tuaj. 🙂
