Stoga sam danas trebao napraviti jednu značajku u svom novom projektu. Projekt je dovoljno opsežan da pokrije što i kako, pa ću vam stoga ispričati samu bit ove "obilježja".

Zadatak je bio da administrator može izbrisati korisnike iz baze podataka. Tako smo postavili parametre pretraživanja i php skripta nam daje popis korisnika. Nasuprot svakog korisnika nalazi se potvrdni okvir, tako da možete odabrati i izbrisati.

Ali nije to tako jednostavno. Zadatak je bio deaktivirati gumb “izbriši” i postati aktivan samo u trenutku kada je odabran barem jedan potvrdni okvir. Naravno, JavaScript čudovišta će reći: "Da, dva su prsta na asfaltu." Ali nisam JS čudovište, i pribjegavam programiranju na ovom jeziku samo kada želim tako nešto, radi praktičnosti.

Pa, kako sam bio pristojan, ušao sam u mrežu, a Yandex i Google i svakakvi portali ugurali su mi u preglednik puno različitih kodova od kojih mi je mozak još uvijek slijepio upravo ono što mi je trebalo. Kako se pokazalo, normalnih (radnih) primjera na mreži stvarno nema, pa sam, da mi još jedan poput mene ne bi raznio mozak, odlučio objaviti radni primjer JavaScript koda.

Mislim da implementaciju HTML-a nije teško razumjeti, ali svejedno ću je dodati:

1 - Jedan
2 - Dva
3 - Tri
… 10 - Deset

Dakle, koji je glavni problem s kojim sam se suočio. Ispada da možete "isključiti" gumb kako želite, t.j. pristupom elementu submit u bilo kojem dostupnom obliku:

Submit.disabled = true;

Međutim, nemoguće je omogućiti (zamijeniti lažnim) na ovaj način i zato sam iskopao takvu konstrukciju:

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

I ovdje, ako zamijenimo true s false, tada je gumb i omogućen i onemogućen. I na kraju, dešifrirat ću ovaj redak koda:

U trenutnom dokumentu u obrascu pod nazivom “form_del” u elementu s nazivom “submit” (a u našem primjeru ovo je ime gumb) ima svojstvo “disabled”, pa ga omogućavamo “true” ili onemogućavamo “false” . Da. omogućavanjem ovog svojstva učinit ćemo naš gumb neaktivnim, a isključivanjem svojstva naš gumb će ponovno postati aktivan.

Poštovani posjetitelji stranice, postavljate pitanja poput "Kako pričvrstiti svoju košaricu na stranicu?" itd. Ne radim 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 pričvrstiti, pružam plaćene i besplatne usluge savjetovanja i finaliziranje stranica. Pišite na formu za povratne informacije na vrhu stranice, odgovorit ću svima.

Gumb za slanje onemogućen (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 je li korisnik ispunio traženo polje ili ne. Postoje dva načina:

1. Provjera rukovatelja, tj. korisnik ispunjava potrebna polja, šalje obrazac, a zatim procesor provjerava obavezna polja, a ako neko polje nije popunjeno, vraća korisnika natrag. Sve je jednostavno, ali potreban je mehanizam za prijenos vrijednosti već popunjenih polja natrag u obrazac, što se može implementirati pomoću sesija, ali to nije baš zgodno.
2. Provjera s JavaScript metodama je mnogo jednostavnija (u smislu kako sam obrazac radi). Svako polje postavljamo onchange event ili bilo koji drugi odgovor na radnju korisnika (pa, ne onmouseover, naravno, iako se to vjerojatno može učiniti čak i smiješno...), nakon čega će funkcija koju smo napisali provjeriti jesu li potrebna polja ispunite i omogućite ili onemogućite gumb za slanje.

Prva opcija se više odnosi na PHP odjeljak, pa se za sada neće razmatrati. Razmotrimo drugi detaljnije. Prvo što nam treba je sam obrazac:

Kao što vidite, gumb Pošalji ima atribut disabled postavljen na onemogućeno. Također, 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 Omogući gumb ()
{
sa (document.forms.form1)
{
ako(polje1.vrijednost! = "" && polje2.vrijednost! = ’’)
{
disable_gutton.disabled = lažno;
}
drugo
{
disable_gutton.disabled = pravi;
}
}
}

Nažalost, nisam pronašao PHP analog funkcije praznog () u JavaScriptu, pa se vrijednosti polja moraju usporediti s praznim nizom. Još jedna stvar na koju vrijedi obratiti pažnju je izjava with (document.forms.form1). Za one koji nisu upoznati s JavaScriptom - svim objektima bit će dodan izraz u zagradama naredbe with, što značajno smanjuje pisanje funkcije. Bez EnableButton () izgledalo bi ovako:

funkcija Omogući gumb ()
{
ako(document.forms.form1.field1.value! = "" && document.forms.form1.field2.value! = '')
{
lažno;
}
drugo
{
document.forms.form1.disable_button.disabled = pravi;
}
}

Slažem se - prilično glomazno.
U nastavku, vrijedi napomenuti da se atribut disabled može koristiti na bilo kojem elementu obrasca. Primjer - popunjavanje podataka o tvrtki - pravna i poštanska adresa. Dva polja za dvije adrese, međutim, možete dodati potvrdni okvir (- 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 gumbi obrasca koji se šalju na poslužitelj 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 - zapravo, 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 gumbe neaktivnim

1. Kako bi korisniku bilo jasno da je već kliknuo na gumb i da se obrazac predaje
2. Kako se poslužitelj ne bi opteretio nepotrebnim zahtjevima, te kako bi se smanjila vjerojatnost bilo kakve greške

Jasno je da nepotrebne klikove možete spriječiti tako što ćete vješati posebnu vizualizaciju koja kaže da je zahtjev prihvaćen i obrazac je poslan (najjednostavniji primjer je prikazati nekakav animirani gif). No, gumbi će i dalje ostati na kliknuti, a najnestrpljiviji korisnici ovu priliku neće iskoristiti. Istodobno, obrazac više neće moći reagirati na te dodatne klikove (animirani gif se već vrti), a frustracija korisnika će se samo povećati.

Također je jasno da se nepotrebni zahtjevi mogu spriječiti tako da se na obrazac objesi neka klasa = "form_is_loading" i provjerava prisutnost ove klase pri svakom podnošenju. Ali zašto raditi te provjere kada možete i bez njih jednostavnim deaktiviranjem gumba?

Kako učiniti gumbe neaktivnim

Ova jednostavna opcija, predložena u gore navedenim temama, pokazuje se nedostatnom i neoperativnom.

Zašto nije dovoljno samo učiniti pritisnutu tipku neaktivnom:

1. Slanje obrasca može se dogoditi i pritiskom na Enter. Stoga se obrada gumba mora objesiti na događaj onsubmit samog obrasca. Osim toga, obrazac može imati nekoliko gumba, a logično bi bilo da svi budu neaktivni, a ne samo gumb na koji ste kliknuli.
2. Ako se nakon slanja obrasca vratimo na stranicu s obrascem (pomoću gumba "Natrag" u pregledniku), predmemorija će raditi: naići ćemo na neaktivne gumbe i nećemo moći ponovno poslati obrazac - bez prisilnog ponovno učitavanje stranice uz gubitak svih prethodno popunjenih polja (Povratak na obrazac za pretraživanje sa stranice s rezultatima pretraživanja je živ primjer).
3. Ako obrazac ima nekoliko gumba (na primjer, "Pošalji" i "Odustani"), tada nećemo moći reći poslužitelju koji je gumb pritisnut: neaktivan gumb ne prenosi svoje ime i vrijednost - čak i ako ga napravimo neaktivan događajem onsubmit

Dakle, skripta za stvaranje neaktivnih gumba

Ukratko, scenarij je sljedeći.

1. Učinite gumbe neaktivnim događajem onsubmit obrasca
2. Vraćamo gumbe u aktivno stanje prije napuštanja stranice događajem window.onunload
3. Svaki gumb obrasca na onclick događaju mora stvoriti skriveno polje istog imena kroz koje će svoju vrijednost prenijeti na poslužitelj

A zatim slijedi detaljnija skripta s izgledom koda.

//// html datoteka /////////////////////////////////////// //// ///////////////////////

//// js datoteka ///////////////////////////////////////// // ///////////////////////////

Tema današnjeg članka bit će popunjavanje obrasca, odnosno njegova mala provjera valjanosti. Točnije, ovo zapravo nije provjera valjanosti, jer neće biti validacije unosa. Ova metoda čini gumb za slanje neaktivnim dok se ne popune obavezna polja u obrascu.

Blokiranje gumba za slanje dok su polja prazna postiže se pomoću jQuery... Pomoći će nam mala skripta koja će ostvariti naše planove. Napravimo ovakav oblik s neaktivnim gumbom.

Uključujući jQuery biblioteku

Prvi korak je spajanje na zaglavlje ispred zatvaranja glava ili u podrum ispred zatvaranja tijelo knjižnice jQuery.

Ovdje morate biti vrlo oprezni, ponekad je knjižnica već spojena ranije i njezino ponovno povezivanje dovest će do sukoba i neoperabilnosti skripte. Stoga, ako ne uspije, pokušajte ne uključiti ovu biblioteku ili promijeniti lokaciju veze.

Pošalji skriptu za blokiranje gumba

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ćem obrascu 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 u polju nema ništa, neće otključati gumb, 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, to neće učiniti ništa. Da bi sve funkcioniralo potrebno je zamijeniti:

! = 0 do> = 7

Odnosno, postavljamo parametar da dopušta slanje ako je polje veće od 7 znakova. Odnosno, gumb se ne aktivira sve dok u polju u kojem je naveden ovaj parametar nema 7 ili više znakova. 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 odrediti maksimalan broj znakova?... Odgovor: u HTML kodu, u polju ulazni napiši atribut

Maksimalna duljina = "15"

koji postavlja ograničenje na 15 znakova. Samo unesite svoj broj.

7. i 9. redak označavaju ID našeg budućeg gumba - "POŠALJI" iz obrasca, koji će se otključati ako se ispune uvjeti. U ovom slučaju, to je - #podnijeti.

HTML kod

Sada ubacimo jednostavan oblik s tri polja. Naš obrazac će poslati ime, mail i broj telefona. Možete koristiti vlastiti obrazac.

Da bi sve funkcioniralo, prvo - morate dodati događaj u obavezna polja -

Onkeyup = "checkParams ()"

koji pokreće našu skriptu.

Drugo, gumbu dodajte atribut disabled, koji će skripta poništiti ako se popune obavezna polja.

Treći po poljima ulazni mora postojati ID, koji je također 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 razumijete, onda ne biste trebali imati poteškoća.

Ova metoda mi je pomogla pri izradi obrazaca koji koriste ajax i pošaljite pismo bez ponovnog učitavanja stranice, bez obzira na to jesu li polja popunjena. Odnosno, ako osoba počne jednostavno pritisnuti gumb, tada će se poslati prazna slova, pa je gumb blokiran i ne dopušta to.

To je sve, hvala na pažnji. 🙂