Așa că azi trebuia să fac o caracteristică în noul meu proiect. Proiectul este suficient de amplu pentru a acoperi ce și cum și, prin urmare, vă voi spune despre însăși esența acestei „funcții”.
Sarcina a fost ca administratorul să poată șterge utilizatorii din baza de date. Deci setăm parametrii de căutare și scriptul php ne oferă o listă de utilizatori. Vizavi de fiecare utilizator există o casetă de selectare, astfel încât să puteți selecta și șterge.
Dar nu este atât de simplu. Sarcina a fost să faceți butonul „Ștergere” inactiv și să devină activ numai în momentul în care a fost 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 când vreau așa ceva, pentru comoditate.
Deci, cât de decent am fost, am intrat în rețea, iar Yandex și Google și tot felul de portaluri au înghesuit în browserul meu o mulțime de coduri diferite de la care creierul meu încă orbit exact ceea ce aveam nevoie. După cum s-a dovedit, chiar nu există exemple normale (funcționale) în rețea și, prin urmare, pentru ca un altul ca mine să nu-mi arunce în aer creierul, am decis să postez un exemplu funcțional de cod JavaScript.
Cred că implementarea HTML nu este greu de înțeles, dar o voi adăuga oricum:
Dragi vizitatori ai site-ului, puneți î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ă înșurubati 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 orice 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:
- Verificarea în handler, de ex. utilizatorul completează câmpurile obligatorii, trimite formularul, apoi procesatorul verifică câmpurile obligatorii și, dacă vreun câmp nu este completat, returnează utilizatorul. Totul este simplu, dar este necesar 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.
- Verificarea cu metodele JavaScript este mult mai simplă (î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 receptiv 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 completat și activați sau dezactivați 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ă luăm în considerare a doua 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 invocă funcția EnableButton (). Cum este această funcție? Să presupunem că câmpurile obligatorii sunt field1 și field3, apoi funcția EnableButton () va arăta astfel:
funcţie EnableButton ()
{
cu (document.forms.form1)
{
dacă(câmp1.valoare! = "" && câmp2.valoare! = ’’)
{
disable_button.disabled = fals;
}
altfel
{
disable_button.disabled = Adevărat;
}
}
}
Din păcate, nu am găsit un analog PHP al funcției goale () în JavaScript, așa că valorile câmpului trebuie comparate cu un șir gol. Un alt lucru la care merită să fiți atenți este declarația with (document.forms.form1). Pentru cei care nu sunt familiarizați cu JavaScript - expresia dintre paranteze a instrucțiunii with va fi adăugată la toate obiectele, ceea ce reduce semnificativ scrierea 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.
În continuare, este de remarcat faptul că atributul dezactivat poate fi folosit pe orice element de formular. Exemplu - completarea informațiilor despre companie - adresa legală și poștală. Două câmpuri pentru două adrese, însă, puteți adăuga o casetă de selectare (- se potrivește cu cea legală), prin marcarea căreia, utilizatorul va indica că câmpul de adresă poștală nu trebuie procesat și i se poate adăuga atributul dezactivat.
) s-a pus întrebarea că ar fi bine ca butoanele formularului trimis la server să seteze proprietatea disabled = „disabled”.
Cu toate acestea, ei încă nu și-au dat seama de ce este necesar acest lucru și cum să o facă la fel. 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. Observ imediat că următorul raționament se aplică ambelor tipuri de formulare: ambele trimise printr-un SUBMIT obișnuit și folosind AJAX.
De ce trebuie să faceți butoanele inactive
- Pentru a face evident utilizatorului că a făcut deja clic pe buton și că formularul este în curs de depunere
- Pentru ca serverul să nu fie încărcat cu solicitări inutile și pentru a reduce probabilitatea oricărei erori
De asemenea, este clar că cererile inutile pot fi prevenite prin agățarea unei clase = „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ă opțiune simplă, propusă în subiectele menționate mai sus, se dovedește a fi insuficientă și inoperantă.De ce nu este suficient să faci doar butonul apăsat inactiv:
- Trimiterea unui formular se poate face și prin apăsarea Enter. Prin urmare, procesarea butoanelor trebuie să fie agățată de evenimentul onsubmit al formularului în sine. În plus, un formular poate avea mai multe butoane și ar fi logic să le facem inactive pe toate, și nu doar butonul pe care s-a făcut clic.
- Dacă, după trimiterea formularului, revenim 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ă un reîncărcarea forțată a paginii cu pierderea tuturor câmpurilor completate anterior (Reveniți la formularul de căutare din pagina cu rezultatele căutării aici este un exemplu plin de viață).
- Dacă formularul are mai multe butoane (de exemplu, „Trimite” și „Anulează”), atunci nu vom putea spune serverului ce buton a fost apăsat: un buton inactiv nu își transmite numele și valoarea - chiar dacă îl facem inactiv de evenimentul onsubmit
Pe scurt, scenariul este următorul.
- Faceți butoanele inactive prin evenimentul onsubmit al formularului
- Revenim butoanele la starea activă înainte de a părăsi pagina lângă evenimentul window.onunload
- 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.
//// fișier html //////////////////////////////////////////////////////////////// ///////////////////////
//// fișier js //////////////////////////////////////////////////////////////// ///////////////////////////Subiectul articolului de astăzi va fi formularul de completare și anume mica sa validare. Pentru a fi mai precis, aceasta nu este cu adevărat validare, deoarece nu va exista nicio validare a intrării. Această metodă face butonul de trimitere inactiv până când câmpurile obligatorii din formular sunt completate.
Blocarea butonului de trimitere în timp ce câmpurile sunt goale se realizează cu jQuery... Ne va ajuta un mic scenariu, care ne va duce la îndeplinire planurile. Să facem o formă ca aceasta cu un buton inactiv.
Inclusiv biblioteca jQuery
Primul pas este să vă conectați la antetul din fața închiderii cap sau la subsolul din fata inchiderii corp biblioteci jQuery.
Aici trebuie să fii foarte atent, uneori biblioteca a fost deja conectată mai devreme și reconectarea ei va duce la un conflict și inoperabilitatea scriptului. Deci, dacă nu funcționează, încercați să nu includeți această bibliotecă sau să schimbați locația conexiunii.
Trimiteți scriptul de blocare a butonului
Funcție checkParams () (nume var = $ ("# nume"). Val (); e-mail var = $ ("# e-mail"). Val (); telefon var = $ ("# telefon"). Val (); if (name.length! = 0 && email.length! = 0 && phone.length! = 0) ($ ("# trimitere"). removeAttr ("dezactivat");) else ($ ("# trimitere"). attr ("dezactivat", "dezactivat");))
În rândurile 2,3,4 ne setăm câmpurile, și anume ID-urile lor în formularul viitor și le atribuim nume pentru ca scriptul să funcționeze. După cum a spus el, sunt trei, așa că, dacă este nevoie, le puteți elimina pe cele suplimentare sau puteți adăuga cele necesare.
A șasea linie conține parametri după numărul de caractere din câmpuri. Acest cod specifică parametrul != 0 , adică dacă nu există nimic în câmp, nu va debloca butonul, dacă conduci în cel puțin un caracter, acest câmp este considerat completat. Și după cum puteți vedea, avem trei câmpuri și fiecare are același parametru.
Dacă trebuie să specificați un număr minim diferit de caractere, atunci trebuie să modificați ușor codul. Dacă înlocuiți doar „0” cu numărul dorit, atunci nu va face nimic. Pentru ca totul să funcționeze, trebuie să înlocuiți:
! = 0 până la> = 7
Adică setăm parametrul să permită trimiterea dacă câmpul este mai mare de 7 caractere. Adică butonul nu este activat până când nu există 7 sau mai multe caractere în câmpul în care este specificat acest parametru. Să setăm următorii parametri. Pentru numele 2 caractere, pentru mail - 5 și numărul 7. Linia finală 6 a scriptului arată astfel:
Dacă (name.length> = 2 && email.length> = 5 && phone.length> = 7) (
Pentru cei care sunt interesați de întrebare - Cum specificați numărul maxim de caractere?... Răspuns: în cod HTML, în câmp intrare scrieți atributul
Lungime maximă = "15"
care stabilește limita la 15 caractere. Doar introduceți numărul dvs.
Rândurile a 7-a și a 9-a indică ID-ul viitorului nostru buton - „TRIMITERE” din formular, care va fi deblocat dacă sunt îndeplinite condițiile. În acest caz, este - #Trimite.
cod HTML
Acum să inserăm o formă simplă cu trei câmpuri. Formularul nostru va trimite numele, e-mailul și numărul de telefon. Puteți folosi propriul formular.
Pentru ca totul să funcționeze, în primul rând - trebuie să adăugați un eveniment în câmpurile necesare -
Onkeyup = „checkParams ()”
care lansează scenariul nostru.
În al doilea rând, adăugați atributul dezactivat la buton, care va fi anulat de script dacă sunt completate câmpurile necesare.
Al treilea după câmpuri intrare trebuie să existe un ID, care este indicat și în script, așa cum am spus mai sus.
Asta e tot drumul. Nu este dificil, deși articolul s-a dovedit a nu fi mic. Dacă citiți cu atenție și înțelegeți totul, atunci nu ar trebui să aveți dificultăți.
Această metodă m-a ajutat când am creat formulare care folosesc ajaxși trimiteți o scrisoare fără a reîncărca pagina, indiferent dacă câmpurile sunt completate. Adică, dacă o persoană începe să apese pur și simplu butonul, atunci literele goale vor fi trimise, astfel încât butonul este blocat și nu permite acest lucru.
Asta e tot, mulțumesc pentru atenție. 🙂
