Tako da sam danas trebao napraviti jednu funkciju u svom novom projektu. Projekat je dovoljno opsežan da pokrije šta i kako, pa ću vam zato reći o samoj suštini ove "karakteristike".
Zadatak je bio da administrator može izbrisati korisnike iz baze podataka. Tako smo postavili parametre pretrage i php skripta nam daje listu korisnika. Nasuprot svakog korisnika nalazi se kvadratić za potvrdu, tako da možete odabrati i izbrisati.
Ali to nije tako jednostavno. Zadatak je bio da se dugme „izbriši“ učini neaktivnim i postane aktivno samo u trenutku kada je bar jedan checkbox označen. Naravno, JavaScript čudovišta će reći: "Da, dva su prsta na asfaltu." Ali ja nisam JS čudovište i pribjegavam programiranju na ovom jeziku samo kada želim tako nešto, radi pogodnosti.
Pa, kako sam bio pristojan, ušao sam u mrežu, a Yandex i Gugl i svakakvi portali ugurali su u moj pretraživač mnogo različitih kodova od kojih mi je mozak i dalje slijepio upravo ono što mi je trebalo. Kako se ispostavilo, normalnih (radnih) primjera na mreži zaista nema, pa sam, da mi još jedan poput mene ne bi raznio mozak, odlučio da objavim radni primjer JavaScript koda.
Mislim da implementaciju HTML-a nije teško razumjeti, ali ću je ipak dodati:
Poštovani posetioci sajta, postavljate pitanja poput "Kako pričvrstiti svoju korpu za kupovinu na sajt?" itd. Ne pravim gotova rješenja, opisujem logiku implementacije, za svaku pojedinu stranicu u svakom slučaju morat ćete dodati određene stvari, pa ako baš trebate nešto zašrafiti ili zakačiti pružam plaćene i besplatne usluge savjetovanja i finalizacija sajtova. Pišite na formu za povratne informacije na vrhu stranice, odgovorit ću svima.
Onemogućeno dugme za slanje (atribut DISABLED)
Ponekad je na stranici potrebno napraviti obrazac u koji korisnik unosi bilo kakve podatke. U obrascu može biti bilo koji broj polja, ali uvijek postoje obavezna polja. Kako provjeriti da li je korisnik ispunio traženo polje ili ne. Postoje dva načina:
- Provjera rukovaoca, tj. korisnik popunjava potrebna polja, šalje obrazac, a zatim procesor provjerava potrebna polja i ako neko polje nije popunjeno, vraća korisnika nazad. Sve je jednostavno, ali je potreban mehanizam za prijenos vrijednosti već popunjenih polja natrag u obrazac, što se može implementirati pomoću sesija, ali to nije baš zgodno.
- Provjera pomoću JavaScript metoda je mnogo jednostavnija (u smislu načina na koji sam obrazac funkcionira). Svako polje postavljamo onchange event ili bilo koji drugi odgovor na radnju korisnika (pa, ne onmouseover, naravno, iako se to vjerovatno može učiniti čak i smiješno...), nakon čega će funkcija koju smo napisali provjeriti da li su potrebna polja ispunite i omogućite ili onemogućite dugme za slanje.
Prva opcija je više vezana za PHP sekciju, tako da se za sada neće razmatrati. Razmotrimo drugo detaljnije. Prva stvar koju trebamo je sama forma:
Kao što vidite, dugme Submit ima atribut disabled postavljen na disabled. Takođe, svako polje obrasca ima onchange događaj koji poziva funkciju EnableButton (). Kakva je ova funkcija? Recimo da su obavezna polja field1 i field3, tada će funkcija EnableButton () izgledati ovako:
funkcija EnableButton ()
{
sa (document.forms.form1)
{
ako(polje1.vrijednost! = "" && polje2.vrijednost! = ’’)
{
disable_button.disabled = false;
}
ostalo
{
disable_button.disabled = istinito;
}
}
}
Nažalost, nisam pronašao PHP analog prazne () funkcije u JavaScript-u, tako da se vrijednosti polja moraju uporediti s praznim nizom. Još jedna stvar na koju vrijedi obratiti pažnju je izjava with (document.forms.form1). Za one koji nisu upoznati sa JavaScript-om - svim objektima će biti dodat izraz u zagradi with naredbe, što značajno smanjuje pisanje funkcije. Bez EnableButton () izgledalo bi ovako:
funkcija EnableButton ()
{
ako(document.forms.form1.field1.value! = "" && document.forms.form1.field2.value! = '')
{
false;
}
ostalo
{
document.forms.form1.disable_button.disabled = istinito;
}
}
Slažem se - prilično glomazan.
U nastavku, vrijedi napomenuti da se atribut disabled može koristiti na bilo kojem elementu obrasca. Primjer - popunjavanje podataka o firmi - pravna i poštanska adresa. Dva polja za dvije adrese, međutim, možete dodati checkbox (- odgovara legalnom), označavanjem kojeg će korisnik naznačiti da polje poštanske adrese nije potrebno obraditi i da mu se može dodati disabled atribut.
) postavilo se pitanje da bi bilo dobro da dugmad obrasca koji se šalju na server postave svojstvo disabled = "disabled".
Međutim, još uvijek nisu shvatili zašto je to potrebno i kako to ipak učiniti. Čini se da bi moglo biti jednostavnije i o čemu se ovdje uopće može govoriti, ali ne - u stvari, sve se pokazalo i nije tako trivijalno. Odmah napominjem da se sljedeće razmišljanje odnosi na obje vrste obrazaca: oba poslana putem običnog SUBMIT-a i korištenjem AJAX-a.
Zašto trebate učiniti dugmad neaktivnim
- Da bi korisniku postalo jasno da je već kliknuo na dugme i da se obrazac predaje
- Tako da se server ne opterećuje nepotrebnim zahtjevima i da se smanji vjerovatnoća bilo kakve greške
Također je jasno da se nepotrebni zahtjevi mogu spriječiti tako što se na obrazac okači neka klasa = "form_is_loading" i provjerava prisutnost ove klase pri svakom podnošenju. Ali zašto raditi ove provjere kada možete i bez njih tako što ćete jednostavno učiniti dugme neaktivnim?
Kako učiniti dugmad neaktivnim
Ova jednostavna opcija, predložena u gore navedenim temama, pokazuje se nedovoljnom i neoperativnom.Zašto nije dovoljno samo učiniti pritisnutu tipku neaktivnom:
- Podnošenje obrasca može se desiti i pritiskom na Enter. Stoga, obrada dugmadi mora biti obješena na onsubmit događaj samog obrasca. Osim toga, obrazac može imati nekoliko dugmadi i logično bi bilo da ih sve učinite neaktivnim, a ne samo dugme na koje ste kliknuli.
- Ako se nakon slanja obrasca vratimo na stranicu sa obrascem (pomoću dugmeta "Nazad" u pretraživaču), keširanje će raditi: naići ćemo na neaktivna dugmad i nećemo moći ponovo da pošaljemo obrazac - bez prinudnog ponovno učitavanje stranice uz gubitak svih prethodno popunjenih polja (Povratak na obrazac za pretragu sa stranice s rezultatima pretraživanja je živ primjer).
- Ako obrazac ima nekoliko dugmadi (na primjer, "Pošalji" i "Otkaži"), tada nećemo moći reći serveru koje je dugme pritisnuto: neaktivno dugme ne prenosi svoje ime i vrijednost - čak i ako ga napravimo neaktivan događajem onsubmit
Ukratko, scenario je sledeći.
- Učinite gumbe neaktivnim do onsubmit događaja obrasca
- Vraćamo dugmad u aktivno stanje prije napuštanja stranice događajem window.onunload
- Svako dugme obrasca na onclick događaju mora kreirati skriveno polje istog imena kroz koje će proslediti svoju vrednost serveru
//// html fajl /////////////////////////////////////// //// ///////////////////////
//// js fajl ///////////////////////////////////////// // ///////////////////////////Tema današnjeg članka bit će popunjavanje formulara, odnosno njegova mala validacija. Da budemo precizniji, ovo zapravo nije validacija, jer neće biti validacije unosa. Ovaj metod čini dugme za slanje neaktivnim dok se ne popune obavezna polja u obrascu.
Blokiranje dugmeta za slanje dok su polja prazna postiže se pomoću jQuery... Pomoći će nam mala skripta koja će realizirati naše planove. Napravimo ovakav oblik sa neaktivnim dugmetom.
Uključujući jQuery biblioteku
Prvi korak je povezivanje sa zaglavljem ispred zatvaranja glava ili do podruma ispred zatvaranja tijelo biblioteke jQuery.
Ovdje morate biti vrlo oprezni, ponekad je biblioteka već ranije povezana i njeno ponovno povezivanje će dovesti do sukoba i neoperabilnosti skripte. Dakle, ako ne uspije, pokušajte ne uključiti ovu biblioteku ili promijeniti lokaciju veze.
Pošalji skriptu za blokiranje dugmeta
Funkcija checkParams () (var name = $ ("# ime"). Val (); var email = $ ("# email"). Val (); var phone = $ ("# telefon"). Val (); if (name.length! = 0 && email.length! = 0 && phone.length! = 0) ($ ("# submit"). removeAttr ("disabled");) else ($ ("# submit"). attr ("onemogućeno", "onemogućeno");))
U redovima 2,3,4 postavljamo naša polja, odnosno njihove ID-ove u budućoj formi i dodjeljujemo im imena za rad skripte. Kako je rekao, ima ih tri, pa ako treba, možete ukloniti višak ili dodati potrebne.
Šesti red sadrži parametre po broju znakova u poljima. Ovaj kod specificira parametar != 0 , odnosno ako nema ničega u polju, neće otključati dugme, ako unesete barem jedan znak, ovo polje se smatra popunjenim. I kao što vidite, imamo tri polja i svako ima isti parametar.
Ako trebate navesti drugačiji minimalni broj znakova, tada morate malo promijeniti kod. Ako samo zamijenite "0" željenim brojem, onda to neće učiniti ništa. Da bi sve funkcioniralo potrebno je zamijeniti:
! = 0 do> = 7
Odnosno, postavljamo parametar da dozvoli slanje ako je polje veće od 7 znakova. Odnosno, dugme se ne aktivira sve dok nema 7 ili više znakova u polju u kojem je naveden ovaj parametar. Postavimo sljedeće parametre. Za ime 2 znaka, za mail - 5 i broj 7. Gotov red 6 skripte izgleda ovako:
Ako (name.length> = 2 && email.length> = 5 && phone.length> = 7) (
Za one koje zanima pitanje - Kako specificirate maksimalan broj znakova?... Odgovor: u HTML kodu, u polju unos napišite atribut
Maksimalna dužina = "15"
koji postavlja ograničenje na 15 znakova. Samo unesite svoj broj.
7. i 9. red označava ID našeg budućeg dugmeta - "POŠALJI" iz obrasca, koje će biti otključano ako se ispune uslovi. U ovom slučaju, to je - #submit.
HTML kod
Sada ubacimo jednostavan oblik sa tri polja. Naš obrazac će poslati ime, mail i broj telefona. Možete koristiti svoj vlastiti obrazac.
Da bi sve funkcionisalo, prvo - potrebno je da dodate događaj u obavezna polja -
Onkeyup = "checkParams ()"
koji pokreće našu skriptu.
Drugo, dugmetu dodajte atribut disabled, koji će skripta poništiti ako se popune obavezna polja.
Treći pored polja unos mora postojati ID, koji je takođe naznačen u skripti, kao što sam rekao gore.
To je cijeli put. Nije teško, iako se pokazalo da članak nije mali. Ako sve pažljivo pročitate i shvatite, onda ne biste trebali imati poteškoća.
Ova metoda mi je pomogla pri kreiranju obrazaca koji koriste ajax i pošaljite pismo bez ponovnog učitavanja stranice, bez obzira da li su polja popunjena. Odnosno, ako osoba počne jednostavno pritisnuti dugme, tada će se poslati prazna slova, tako da je dugme blokirano i ne dozvoljava to.
To je sve, hvala na pažnji. 🙂
