) s-a pus întrebarea dacă ar fi bine ca butoanele formularului trimis la server să seteze proprietatea disabled = „disabled”.

Cu toate acestea, până acum nu și-au dat seama de ce este necesar acest lucru și cum să o facă oricum. S-ar părea că ar putea fi mai simplu și despre ce poți vorbi aici deloc, dar nu - de fapt, totul s-a dovedit a nu fi atât de banal. Imediat, observ că următorul raționament se aplică ambelor tipuri de formulare: ambele trimise prin SUBMIT obișnuit și folosind AJAX.

De ce trebuie să faceți butoanele inactive

1. Pentru a face evident utilizatorului că a făcut deja clic pe buton și că formularul este în curs de depunere
2. Pentru ca serverul să nu fie încărcat cu solicitări inutile și pentru a reduce probabilitatea oricărei erori

Este clar că puteți preveni clicurile inutile prin agățarea unei vizualizări speciale care spune că cererea a fost acceptată și că formularul este trimis ( cel mai simplu exemplu- Arată câteva gif animat). Cu toate acestea, butoanele vor rămâne în continuare clicabile, iar cei mai nerăbdători utilizatori nu vor profita de această oportunitate. În același timp, formularul nu va mai putea răspunde la aceste clicuri suplimentare (gif-ul animat se învârte deja), iar frustrarea utilizatorului nu va face decât să crească.

De asemenea, este clar că cereri suplimentare poate fi prevenit prin introducerea unui class="form_is_loading" pe formular și verificând prezența acestei clase la fiecare trimitere. Dar de ce faceți aceste verificări atunci când vă puteți descurca fără ele făcând butonul inactiv?

Cum să faceți butoanele inactive

Această variantă simplă propusă în subiectele mai sus menționate se dovedește a fi insuficientă și nefuncționabilă.

De ce nu este suficient să faci doar butonul apăsat inactiv:

1. Trimiterea formularelor poate apărea și prin apăsarea Enter. Prin urmare, procesarea butoanelor trebuie să fie suspendată la evenimentul onsubmit al formularului în sine. De asemenea, un formular poate avea mai multe butoane și ar fi logic să le faceți inactive pe toate, nu doar butonul care a fost apăsat.
2. Dacă, după trimiterea formularului, revenim din nou la pagina cu formularul (folosind butonul „Înapoi” din browser), atunci memorarea în cache va funcționa: vom întâlni butoane inactive și nu vom mai putea trimite formularul din nou - fără repornire forțată pagină cu pierderea tuturor câmpurilor completate anterior (Reveniți la formular de căutare din pagina cu rezultatele căutării, aici este un exemplu live).
3. Dacă formularul are mai multe butoane (de exemplu, „Publicare” și „Anulare”), atunci nu vom putea spune serverului ce buton a fost apăsat: butonul inactiv nu își transmite numele și valoarea - chiar dacă îl facem inactiv la evenimentul onsubmit

Deci, scriptul pentru crearea butoanelor inactive

Pe scurt, scenariul este următorul.

1. Butoanele devin inactive prin evenimentul onsubmit al formularului
2. Butoanele revin la stare activăînainte de a părăsi pagina lângă evenimentul window.onunload
3. Fiecare buton de formular de pe evenimentul onclick trebuie să creeze un câmp ascuns cu același nume, prin care își va transmite valoarea către server.

Și apoi urmează un script mai detaliat cu aspectul codului.

//// fișier html //////////////////////////////////////////////////////////////////////

//// fișier js //////////////////////////////////////////////////////////////// ////////////////////////////////////////////

Așa că azi trebuia să fac o caracteristică în noul meu proiect. Proiectul este suficient de mare pentru a explica ce și cum și, prin urmare, voi vorbi despre însăși esența acestei „funcții”.

Sarcina a fost să permită administratorului să ștergă utilizatori din baza de date. Deci setăm parametrii de căutare și scriptul php ne oferă o listă de utilizatori. Vizavi de fiecare utilizator se află o casetă de selectare pătrată (căsuță de selectare), astfel încât să puteți selecta și șterge.

Dar nu totul este atât de simplu. Sarcina a fost de a face butonul „Ștergere” inactiv și de a deveni activ numai în momentul în care este bifată cel puțin o casetă de selectare. Desigur, monștrii JavaScript vor spune, da, sunt două degete pe asfalt. Dar nu sunt un monstru JS, și recurg la programare în acest limbaj doar atunci când îmi doresc așa ceva, pentru comoditate.

Deci, ca o persoană decentă, am intrat în rețea, iar Yandex și Google și tot felul de portaluri de acolo au introdus o mulțime de coduri diferite în browser-ul meu, din care creierul meu încă orbit exact ceea ce aveam nevoie. După cum s-a dovedit, chiar nu există exemple normale (de lucru) în rețea și, prin urmare, pentru ca o altă persoană ca mine să nu-și sufle creierul, am decis să postez un exemplu funcțional de cod JavaScript.

Implementarea HTML, cred, nu este greu de înțeles, dar totuși o voi adăuga:

1 - unu
2 - Două
3 - Trei
… 10 - Zece

Deci, care este principala problemă cu care mă confrunt. Se pare că puteți „dezactiva” butonul după cum doriți, adică. prin accesarea elementului de trimitere în orice formă disponibilă:

submit.disabled = adevărat;

Cu toate acestea, este imposibil să activați (înlocuiți cu false) într-un mod similar și de aceea am dezgropat deja o astfel de construcție:

Document.form_del.elements["submit"].disabled = true;

Și aici, dacă înlocuim true cu false, atunci butonul se pornește și se oprește. Și, în sfârșit, voi descifra această linie de cod:

În documentul curent în forma numită „form_del”, elementul cu numele „submit” (și în exemplul nostru acest nume este butonul) are proprietatea „disabled”, așa că îl activăm „true” sau îl dezactivăm "fals". Acea. activând această proprietate, vom face butonul nostru inactiv, iar prin dezactivarea proprietății, butonul nostru va deveni activ din nou.

Dragi vizitatori ai site-ului care pun întrebări precum „Cum să atașați coșul de cumpărături la site?” etc. Nu fac soluții gata făcute, descriu logica de implementare, pentru fiecare site individual va trebui să adăugați anumite lucruri în orice caz, așa că dacă chiar aveți nevoie să fixați sau să atașați ceva, vă ofer servicii plătite și gratuite pentru consultanță și finalizarea site-urilor. Scrieți la formularul de feedback din partea de sus a paginii, voi răspunde tuturor.

Butonul de trimitere a fost dezactivat (atributul DEZACTIVAT)

Uneori pe site este necesar să se realizeze un formular în care utilizatorul introduce unele date. În formular poate exista orice număr de câmpuri, dar există întotdeauna câmpuri obligatorii. Cum se verifică dacă utilizatorul a completat câmpul obligatoriu sau nu. Există două moduri:

1. Verificați operatorul, adică utilizatorul completează câmpurile obligatorii, trimite formularul, apoi handlerul verifică câmpurile obligatorii, iar dacă vreun câmp nu este completat, returnează utilizatorul înapoi. Totul este simplu, totuși, este nevoie de un mecanism pentru a transfera valorile câmpurilor deja completate înapoi în formular, care poate fi implementat folosind sesiuni, dar acest lucru nu este foarte convenabil.
2. Validare prin metode JavaScript - totul este mult mai simplu (în ceea ce privește modul în care funcționează formularul în sine). Setăm fiecărui câmp un eveniment onchange sau orice alt eveniment care răspunde la acțiunea utilizatorului (bine, nu onmouseover desigur, deși probabil se poate face chiar și amuzant...), după care funcția pe care am scris-o va verifica dacă câmpurile obligatorii sunt completate și permit sau dezactivează butonul de trimitere.

Prima opțiune este mai mult legată de secțiunea PHP, așa că nu va fi luată în considerare deocamdată. Să-l luăm pe cel de-al doilea mai detaliat. Primul lucru de care avem nevoie este forma în sine:

După cum puteți vedea, butonul Trimitere are un atribut dezactivat setat la dezactivat. De asemenea, fiecare câmp de formular are un eveniment onchange care apelează funcția EnableButton(). Ce este această funcție? Să presupunem că câmpurile obligatorii sunt câmpul1 și câmpul3, apoi funcția EnableButton() ar arăta astfel:

funcţie EnableButton()
{
cu(document.forms.form1)
{
dacă(field1.value!=""&&field2.value!='')
{
disable_button.disabled= fals;
}
altfel
{
disable_button.disabled= Adevărat;
}
}
}

Din păcate, nu am găsit un analog JavaScript al funcției PHP empty(), așa că valorile câmpului trebuie comparate cu un șir gol. Un alt lucru la care merită să acordați atenție este declarația with (document.forms.form1). Pentru cei care nu sunt familiarizați cu JavaScript, expresia între paranteze a instrucțiunii with va fi adăugată la toate obiectele, ceea ce poate scurta semnificativ intrarea funcției. Fără cu EnableButton() ar arăta astfel:

funcţie EnableButton()
{
dacă(document.forms.form1.field1.value!=""&& document.forms.form1.field2.value!='')
{
fals;
}
altfel
{
document.forms.form1.disable_button.disabled= Adevărat;
}
}

De acord - destul de greoaie.
Ca o notă suplimentară, atributul dezactivat poate fi utilizat pe orice element de formular. Un exemplu este completarea informațiilor despre companie - adresa legală și poștală. Două câmpuri pentru două adrese, totuși, puteți adăuga o casetă de selectare (- se potrivește cu cea legală), marcând care, utilizatorul va indica că câmpul de adresă poștală nu trebuie procesat și îi puteți adăuga atributul dezactivat.