Si të bëni një buton joaktiv Javascript. Butoni joaktiv i dorëzimit (atributi DISABLED)

) u ngrit pyetja nëse do të ishte mirë që butonat e një formulari të dërguar në server të vendosnin veçorinë disabled = "disabled" .

Sidoqoftë, ne ende nuk e kemi kuptuar pse është e nevojshme kjo dhe si ta bëjmë atë. Duket se mund të ishte më e thjeshtë dhe për çfarë mund të flasim këtu fare, por jo - në fakt, gjithçka doli të ishte jo aq e parëndësishme. Më lejoni të 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 duke përdorur 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ë e qartë se ju mund të parandaloni klikimet e panevojshme duke bashkangjitur një vizualizim të veçantë duke thënë se kërkesa është pranuar dhe formulari po dërgohet ( shembulli më i thjeshtë- trego disa gif i animuar). Megjithatë, butonat do të mbeten ende të klikueshëm dhe përdoruesit më të paduruar nuk do ta shfrytëzojnë këtë mundësi. Në të njëjtën kohë, forma nuk do të jetë më në gjendje të reagojë ndaj këtyre klikimeve shtesë (gif-i i animuar tashmë po rrotullohet), dhe zhgënjimi i përdoruesit vetëm do të rritet.

Është gjithashtu e qartë se kërkesa të panevojshme mund të parandalohet duke i bashkangjitur formularit disa class="form_is_loading" dhe duke kontrolluar praninë e kësaj klase gjatë çdo paraqitjeje. Por pse i bëjnë këto kontrolle kur mund të bësh 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 i papërshtatshëm.

Pse nuk mjafton thjesht të bësh joaktiv një buton të shtypur:

Dorëzimi i një formulari mund të ndodhë edhe duke shtypur Enter. Prandaj, përpunimi i butonave duhet t'i caktohet ngjarjes 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 përsëri në faqen me formularin (duke përdorur butonin "Kthehu" në shfletues), atëherë memoria do të funksionojë: do të hasim butona joaktivë dhe nuk do të jemi në gjendje ta dorëzojmë përsëri formularin - pa rindezje e detyruar faqet me humbjen e të gjitha fushave të mbushura më parë (Kthehu te formulari i kërkimit këtu është një shembull i drejtpërdrejtë nga faqja e rezultateve të kërkimit).

Nëse një formë ka shumë butona (për shembull, "Publish" dhe "Anulo"), atëherë nuk do të jemi në gjendje t'i tregojmë serverit se cili buton është klikuar: butoni joaktiv nuk transmeton emrin dhe vlerën e tij - edhe nëse e bëjmë atë joaktiv në ngjarjen onsubmit

Pra, skripti për krijimin e butonave joaktive

Shkurtimisht, skenari është ky.

Bëjini butonat joaktivë bazuar në ngjarjen onsubmit të formularit

Ne i kthejmë butonat në gjendje aktive para se të largoheni nga faqja në dritare.ngjarja onunload

Çdo buton formulari duhet të krijojë një fushë të fshehur me të njëjtin emër në ngjarjen onclick, përmes së cilës do të transmetojë vlerën e saj në server.

Dhe më pas vijon një skenar më i detajuar me një paraqitje kodi.

//// skedar html///////////////////////////////////////////////////////////////// ///////////////// formUploader.prepareForm(document.getElementById("forma_forma")); //// skedar js /////////////////////////////////////////////////////////////////// ////////////////////////// formularNgarkuesi = ( përgatitForm: funksion(formë)( // Secili buton kuptimplotë Kur klikohet, forma duhet të krijojë një fushë të fshehur me të njëjtin emër // në mënyrë që informacioni se cili buton është klikuar të transmetohet në server var allFormFields = form.getElementsByTagName("input"); për (var i=0; i