) postavilo se pitanje da li bi bilo dobro da dugmad obrasca koji se šalju na server postavljaju svojstvo disabled = "disabled".

Međutim, do sada nisu shvatili zašto je to potrebno i kako to 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 rezonovanje odnosi na obje vrste obrazaca: oba poslana putem redovnog SUBMIT-a i korištenjem AJAX-a.

Zašto trebate učiniti dugmad neaktivnim

1. Kako bi korisniku postalo jasno da je već kliknuo na dugme i da se obrazac predaje
2. Tako da se server ne opterećuje nepotrebnim zahtjevima i da se smanji vjerovatnoća bilo kakve greške

Jasno je da nepotrebne klikove možete spriječiti okačenjem posebne vizualizacije koja kaže da je zahtjev prihvaćen i da se obrazac predaje ( najjednostavniji primjer- pokaži malo animirani gif). Međutim, dugmad će i dalje ostati na klik, a najnestrpljiviji korisnici neće iskoristiti ovu priliku. U isto vrijeme, obrazac više neće moći reagirati na ove dodatne klikove (animirani gif se već vrti), a frustracija korisnika će se samo povećati.

To je takođe jasno dodatni zahtjevi može se spriječiti stavljanjem nekog class="form_is_loading" na obrazac i provjerom prisutnosti 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 varijanta predložena u gore navedenim temama pokazuje se nedovoljnom i neizvodljivom.

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

1. Podnošenje obrazaca se može izvršiti i pritiskom na Enter. Stoga se obrada dugmadi mora okačiti na događaj onsubmit samog obrasca. Takođe, obrazac može imati više dugmadi i bilo bi logično učiniti ih neaktivnim, a ne samo dugme koje je pritisnuto.
2. Ako se nakon slanja obrasca ponovo vratimo na stranicu sa obrascem (pomoću dugmeta „Nazad” u pretraživaču), tada će keširanje raditi: naići ćemo na neaktivna dugmad i nećemo moći ponovo da pošaljemo obrazac - bez prisilno ponovno pokretanje stranica sa gubitkom svih prethodno popunjenih polja (Povratak na formular za pretragu sa stranice s rezultatima pretrage evo primjera uživo).
3. Ako obrazac ima nekoliko dugmadi (na primjer, "Objavi" 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 učinimo neaktivnim na onsubmit događaju

Dakle, skripta za kreiranje neaktivnih dugmadi

Ukratko, scenario je sledeći.

1. Dugmad se čini neaktivnim događajem onsubmit obrasca
2. Dugmad se vraćaju na aktivno stanje prije napuštanja stranice događajem window.onunload
3. Svako dugme obrasca na onclick događaju mora kreirati skriveno polje istog imena kroz koje će proslediti svoju vrednost serveru

A zatim slijedi detaljnija skripta s rasporedom koda.

//// html fajl //////////////////////////////////////////////////////////////////////

//// js fajl /////////////////////////////////////////// //////////////////////////////

Tako da sam danas trebao napraviti jednu funkciju u svom novom projektu. Projekat je dovoljno velik da objasni šta i kako i zato ću govoriti o samoj suštini ove „osobine“.

Zadatak je bio dozvoliti administratoru da izbriše korisnike iz baze podataka. Tako da postavljamo parametre pretrage i php skripta nam daje listu korisnika. Nasuprot svakog korisnika nalazi se kvadratić za potvrdu (checkbox) prekidač, tako da možete birati i brisati.

Ali nije sve tako jednostavno. Zadatak je bio da se dugme „izbriši“ učini neaktivnim, a da postane aktivno samo u trenutku kada se označi 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 pogodnosti.

Tako sam, kao pristojna osoba, ušao u mrežu, a Yandex i Gugl i tamo razni portali ubacili su mi mnogo različitog koda u pretraživač od kojeg 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 zato, da nekoj drugoj osobi poput mene ne raznese mozak, odlučio da objavim radni primjer JavaScript koda.

HTML implementaciju, mislim, nije teško razumjeti, ali ipak ću je dodati:

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

Dakle, šta je glavni problem sa kojim se suočavam. Ispostavilo se da dugme možete "isključiti" kako želite, tj. pristupanjem elementu submit u bilo kojem dostupnom obliku:

submit.disabled = istina;

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

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

I ovdje, ako zamijenimo true sa false, tada se dugme uključuje i isključuje. I na kraju, dešifrirat ću ovu liniju koda:

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

Dragi posjetitelji stranice koji postavljaju pitanja poput "Kako pričvrstiti svoju košaricu na stranicu?" itd. Ne pravim gotova rješenja, opisujem logiku implementacije, za svaku pojedinačnu stranicu u svakom slučaju morat ćete dodati određene stvari, pa ako baš trebate nešto pričvrstiti ili pričvrstiti, 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 neke 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:

1. Provjerite u rukovaocu, tj. korisnik popunjava potrebna polja, šalje obrazac, a zatim rukovatelj provjerava potrebna polja i ako neko polje nije popunjeno, vraća korisnika nazad. 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 mnogo jednostavnije (u smislu kako sama forma radi). Svako polje postavljamo onchange event ili bilo koji drugi događaj koji odgovara 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 dozvolite ili onemogućite dugme za slanje.

Prva opcija je više vezana za PHP sekciju, tako da se za sada neće razmatrati. Razmotrimo drugi detaljnije. Prvo što nam treba je sam obrazac:

Kao što vidite, dugme Submit ima atribut disabled postavljen na disabled. Također, svako polje obrasca ima onchange događaj koji poziva funkciju EnableButton(). Koja je ovo funkcija? Recimo da su obavezna polja field1 i field3, tada bi funkcija EnableButton() izgledala ovako:

funkcija EnableButton()
{
sa(document.forms.form1)
{
ako(field1.value!=""&&field2.value!='')
{
disable_button.disabled= false;
}
ostalo
{
disable_button.disabled= tačno;
}
}
}

Nažalost, nisam pronašao JavaScript analog funkcije PHP empty(), 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, izraz izraza with u zagradi će biti dodan svim objektima, što može značajno skratiti unos 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= tačno;
}
}

Slažem se - prilično glomazan.
Kao daljnja napomena, atribut disabled se može koristiti na bilo kojem elementu obrasca. Primjer je popunjavanje podataka o firmi - pravna i poštanska adresa. Dva polja za dvije adrese, međutim, možete dodati checkbox (- odgovara legalnom), provjeravanjem kojeg će korisnik naznačiti da polje poštanske adrese nije potrebno obraditi i možete mu dodati disabled atribut.