) postavljeno je pitanje bi li bilo dobro da gumbi obrasca koji se šalju poslužitelju postave svojstvo disabled = "disabled".

Međutim, do sada nisu shvatili zašto je to potrebno i kako to uopće učiniti. Čini se da bi moglo biti jednostavnije i o čemu se ovdje uopće može razgovarati, ali ne - zapravo se pokazalo da sve nije tako trivijalno. Odmah napominjem da se sljedeće obrazloženje odnosi na obje vrste obrazaca: oba poslana putem uobičajenog SUBMIT-a i korištenjem AJAX-a.

Zašto morate gumbe učiniti neaktivnima

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

Jasno je da nepotrebne klikove možete spriječiti tako da okačite posebnu vizualizaciju koja govori da je zahtjev prihvaćen i obrazac se predaje ( najjednostavniji primjer- pokaži neke animirani gif). No, gumbi će i dalje ostati klikabilni, a najnestrpljiviji korisnici neće iskoristiti ovu mogućnost. Istodobno, forma više neće moći odgovoriti na te dodatne klikove (animirani gif se već vrti), a frustracija korisnika će samo rasti.

Također je jasno da dodatni zahtjevi može se spriječiti stavljanjem class="form_is_loading" na obrazac i provjeravanjem prisutnosti ove klase na svakom podnošenju. Ali zašto te provjere kada možete i bez njih tako da gumb jednostavno učinite neaktivnim?

Kako učiniti gumbe neaktivnim

Ova jednostavna varijanta predložena u gore navedenim temama pokazala se nedostatnom i neprovedivom.

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

1. Obrasci za slanje također se mogu izvršiti pritiskom na Enter. Stoga se obrada gumba mora prekinuti s događajem onsubmit samog obrasca. Također, obrazac može imati više gumba i bilo bi logično učiniti ih sve neaktivnima, a ne samo gumb koji je pritisnut.
2. Ako se nakon podnošenja obrasca ponovno vratimo na stranicu s obrascem (pomoću gumba "Natrag" u pregledniku), tada će predmemoriranje raditi: naići ćemo na neaktivne gumbe i nećemo moći ponovno poslati obrazac - bez prisilno ponovno pokretanje stranica s gubitkom svih prethodno popunjenih polja (Povratak na obrazac za pretraživanje sa stranice rezultata pretraživanja ovdje je živi primjer).
3. Ako obrazac ima nekoliko gumba (na primjer, "Objavi" i "Odustani"), tada nećemo moći reći poslužitelju koji je gumb pritisnut: neaktivan gumb ne prosljeđuje svoje ime i vrijednost - čak i ako ga učinimo neaktivnim na događaju onsubmit

Dakle, skripta za stvaranje neaktivnih gumba

Ukratko, scenarij je sljedeći.

1. Gumbi postaju neaktivni događajem obrasca onsubmit
2. Gumbi za povratak na aktivno stanje prije napuštanja stranice pokraj prozora.onunload događaj
3. Svaki gumb obrasca na događaju onclick mora stvoriti skriveno polje istog imena, kroz koje će proslijediti svoju vrijednost poslužitelju

Zatim slijedi detaljnija skripta s rasporedom koda.

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

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

Dakle, danas sam trebao napraviti jednu značajku u svom novom projektu. Projekt je dovoljno velik da objasni što i kako i zato ću govoriti o samoj biti ove “feature”.

Zadatak je bio omogućiti administratoru brisanje korisnika iz baze podataka. Dakle, postavili smo parametre pretraživanja i php skripta nam daje popis korisnika. Nasuprot svakog korisnika nalazi se kvadratni checkbox (kvačica) prekidač, tako da možete birati i brisati.

Ali nije sve tako jednostavno. Zadatak je bio učiniti gumb “izbriši” neaktivnim, te postati aktivan tek u trenutku kada je označen barem jedan checkbox. 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 praktičnosti.

Dakle, kao pristojna osoba, ušao sam u mrežu, a Yandex i Google i kojekakvi tamo portali su mi nagurali hrpu raznih kodova u preglednik od kojih je moj mozak i dalje slijepio točno ono što mi treba. Kako se pokazalo, na mreži stvarno nema normalnih (radnih) primjera, pa sam odlučio objaviti radni primjer JavaScript koda, kako si netko poput mene ne bi razbijao glavu.

Implementacija HTML-a, mislim, nije teška za razumjeti, ali ipak ću je dodati:

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

Dakle, koji je glavni problem s kojim se suočavam. Ispada da gumb možete "isključiti" kako želite, tj. pristupom elementu za slanje u bilo kojem dostupnom obliku:

submit.disabled = istina;

Međutim, nemoguće je omogućiti (zamijeniti s false) na sličan način i zato sam već iskopao takvu konstrukciju:

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

I ovdje, ako zamijenimo true s false, tada se gumb uključuje i isključuje. I na kraju, dešifrirat ću ovaj redak koda:

U trenutnom dokumentu u obrascu pod nazivom “form_del”, element pod nazivom “submit” (a u našem primjeru je to ime gumb) ima svojstvo “disabled” pa ga uključujemo “true” ili ga isključujemo. “lažno”. Da. omogućavanjem ovog svojstva učinit ćemo naš gumb neaktivnim, a onemogućavanjem svojstva, naš gumb će ponovno postati aktivan.

Poštovani posjetitelji stranice koji postavljaju pitanja poput "Kako pričvrstiti svoju košaricu na stranicu?" itd. Ne radim gotova rješenja, opisujem logiku implementacije, za svaku pojedinačnu stranicu ćete u svakom slučaju morati dodati određene stvari, tako da ako stvarno morate nešto pričvrstiti ili pričvrstiti, pružam plaćene i besplatne usluge za savjetovanje i dovršavanje stranica. Pišite u obrazac 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 upisuje neke podatke. U obrascu može biti neograničen broj polja, ali uvijek postoje obavezna polja. Kako provjeriti je li korisnik ispunio traženo polje ili ne. Postoje dva načina:

1. Provjerite u rukovatelju, tj. korisnik ispunjava tražena polja, šalje obrazac, a zatim rukovatelj provjerava tražena polja, te ako neko polje nije popunjeno, vraća korisnika natrag. Sve je jednostavno, međutim, 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. Validacija JavaScript metodama - sve je puno jednostavnije (što se tiče samog rada forme). Svakom polju postavljamo događaj onchange ili bilo koji drugi događaj koji reagira na radnju korisnika (dobro, 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 dopustite ili onemogućite gumb za slanje.

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

Kao što vidite, gumb Pošalji ima onemogućeni atribut postavljen na onemogućeno. Također, svako polje obrasca ima događaj onchange koji poziva funkciju EnableButton(). Koja je ovo funkcija? Recimo da su potrebna polja polje1 i polje3, tada bi funkcija EnableButton() izgledala ovako:

funkcija EnableButton()
{
sa (dokument.forme.form1)
{
ako(field1.value!=""&&field2.value!='')
{
onemogući_gumb.disabled= lažno;
}
drugo
{
onemogući_gumb.disabled= pravi;
}
}
}

Nažalost, nisam pronašao JavaScript analognu funkciju PHP empty(), tako da se vrijednosti polja moraju usporediti s praznim nizom. Još jedna stvar na koju vrijedi obratiti pozornost je naredba with (document.forms.form1). Za one koji nisu upoznati s JavaScriptom, izraz u zagradama naredbe with bit će dodan svim objektima, što može značajno skratiti unos funkcije. Bez EnableButton() to bi izgledalo ovako:

funkcija EnableButton()
{
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 glomazan.
Kao daljnja napomena, atribut onemogućen može se koristiti na bilo kojem elementu obrasca. Primjer je popunjavanje podataka o tvrtki - pravna i poštanska adresa. Dva polja za dvije adrese, no možete dodati potvrdni okvir (- odgovara legalnom), odabirom kojeg će korisnik pokazati da polje poštanske adrese ne treba obrađivati ​​i možete mu dodati atribut onemogućeno.