JavaScript – Kuinka tehdä painikkeesta aktiivinen ja ei-aktiivinen olosuhteista riippuen.

Joten tänään minun piti tehdä yksi ominaisuus uudessa projektissani. Projekti on tarpeeksi laaja selittääkseen mitä ja miten, ja siksi puhun tämän "ominaisuuden" olemuksesta.

Tavoitteena oli antaa järjestelmänvalvojalle mahdollisuus poistaa käyttäjiä tietokannasta. Aseta siis hakuparametrit ja php-skripti antaa meille luettelon käyttäjistä. Jokaista käyttäjää vastapäätä on valintaruutu (valintaruutu) -kytkin, jonka avulla voit valita ja poistaa.

Mutta se ei ole niin yksinkertaista. Tehtävänä oli varmistaa, että "poista"-painike ei ole aktiivinen ja aktivoituu vasta sillä hetkellä, kun vähintään yksi valintaruutu oli valittuna. Luonnollisesti JavaScript-hirviöt sanovat, kyllä, asfaltilla on kaksi sormea. Mutta en ole JS-hirviö, ja turvaudun ohjelmointiin tällä kielellä vain, kun haluan jotain sellaista mukavuuden vuoksi.

Joten, kuten kunnollinen ihminen, menin nettiin, ja Yandex ja Google ja kaikenlaiset portaalit siellä työnsivät selaimelleni paljon erilaista koodia, josta aivoni edelleen mukulasivat yhteen juuri sitä mitä tarvitsin. Kuten kävi ilmi, verkossa ei todellakaan ole normaaleja (toimivia) esimerkkejä, ja siksi, jotta muut kaltaiset eivät räjäyttäisi, päätin julkaista toimivan. JavaScript esimerkki koodi.

Mielestäni HTML-toteutus ei ole vaikea ymmärtää, mutta lisään sen kuitenkin:

1 - Yksi
2 - kaksi
3-kolme
… 10 - kymmenen

Joten mikä on tärkein kohtaamani ongelma? Osoittautuu, että voit "sammuttaa" painikkeen haluamallasi tavalla, ts. käyttämällä lähetyselementtiä missä tahansa saatavilla olevassa muodossa:

Submit.disabled = tosi;

On kuitenkin mahdotonta ottaa käyttöön (korvaaminen false) tällä tavalla, ja siksi kaivoin seuraavan rakenteen:

Document.form_del.elements["lähetä"].disabled = tosi;

Ja tässä, jos korvaamme tosi arvolla false, painike on sekä päällä että pois päältä. Ja lopuksi tulkitsen tämän koodirivin:

Nykyisessä dokumentissa muodossa "form_del" elementissä, jonka nimi on "submit" (ja esimerkissämme tämä nimi on painike), on ominaisuus "disabled", joten laitamme sen päälle "true" tai kytke se pois päältä "false". Että. päälle tämä omaisuus teemme painikkeemme ei-aktiiviseksi, ja kun ominaisuus sammutetaan, painikkeestamme tulee jälleen aktiivinen.

) heräsi kysymys, olisiko palvelimelle lähetetyn lomakkeen painikkeille hyvä asettaa ominaisuus disabled = "disabled" .

Emme kuitenkaan ole vielä selvittäneet, miksi tätä tarvitaan ja miten se tehdään. Vaikuttaa siltä, että se voisi olla yksinkertaisempaa ja mistä voimme puhua täällä, mutta ei - itse asiassa kaikki ei osoittautunut niin triviaaliksi. Haluan heti huomauttaa, että seuraava perustelu koskee molempia lomakkeita: molemmat lähetetään tavallisella SUBMIT-toiminnolla ja AJAX-käyttäjillä.

Miksi painikkeet pitää tehdä passiivisiksi?

Jotta käyttäjä huomaa, että hän on jo napsauttanut painiketta ja että lomaketta lähetetään

Jotta palvelin ei lataudu tarpeettomilla pyynnöillä ja vähentää virheiden todennäköisyyttä

On selvää, että voit estää tarpeettomia napsautuksia liittämällä siihen erikoisvisualisoinnin, jossa sanotaan, että pyyntö on hyväksytty ja lomaketta lähetetään ( yksinkertaisin esimerkki- näytä joitain animoitu gif). Painikkeet ovat kuitenkin edelleen klikattavia, eivätkä kärsimättömät käyttäjät käytä tätä mahdollisuutta. Samaan aikaan lomake ei enää pysty reagoimaan näihin lisänapsautuksiin (animoitu gif pyörii jo), ja käyttäjän turhautuminen vain lisääntyy.

On myös selvää, että tarpeettomat pyynnöt voidaan estää liittämällä lomakkeeseen class="form_is_loading" ja tarkistamalla tämän luokan olemassaolo jokaisen lähetyksen yhteydessä. Mutta miksi nämä tarkistukset tehdään, kun voit tehdä ilman niitä tekemällä painikkeen passiiviseksi?

Kuinka tehdä painikkeista ei-aktiivisia Tämä yllä mainituissa aiheissa ehdotettu yksinkertainen vaihtoehto osoittautuu riittämättömäksi ja mahdottomaksi.

Miksi ei riitä, että painetusta painikkeesta tehdään ei-aktiivinen:

Lomakkeen voi lähettää myös painamalla Enter. Siksi painikkeiden käsittely on kohdistettava itse lomakkeen onsubmit-tapahtumaan. Lisäksi lomakkeessa voi olla useita painikkeita, ja olisi loogista tehdä ne kaikki passiivisiksi, ei vain napsautettu painike.

Jos palaamme lomakkeen lähettämisen jälkeen uudelleen sivulle lomakkeella (selaimen "Takaisin"-painikkeella), välimuisti toimii: kohtaamme ei-aktiivisia painikkeita, emmekä voi lähettää lomaketta uudelleen - ilman pakotettu uudelleenkäynnistys sivut, joista kaikki aiemmin täytetyt kentät ovat kadonneet (Palaa hakulomake tässä on elävä esimerkki hakutulossivulta).

Jos lomakkeessa on useita painikkeita (esimerkiksi "Julkaise" ja "Peruuta"), emme voi kertoa palvelimelle, mitä painiketta napsautettiin: passiivinen painike ei välitä nimeään ja arvoaan - vaikka tekisimme sen ei-aktiivinen käyttämällä onsubmit-tapahtumaa

Joten, skripti ei-aktiivisten painikkeiden luomiseen

Lyhyesti skenaario on tämä.

Tee painikkeista ei-aktiivisia lomakkeen lähetystapahtuman perusteella

Palautamme painikkeet aktiiviseen tilaan ennen sivulta poistumista käyttämällä window.onunload-tapahtumaa

Jokaisen lomakepainikkeen on luotava onclick-tapahtumassa samanniminen piilotettu kenttä, jonka kautta se välittää arvonsa palvelimelle

Ja sitten seuraa yksityiskohtaisempi skripti koodiasettelulla.

//// html-tiedosto////////////////////////////////////////////////// ///////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js-tiedosto ///////////////////////////////////////////// //////////////////////////// formUploader = ( Valmistele Lomake: toiminto(lomake)( // Jokainen merkityksellinen painike Kun lomaketta napsautetaan, sen on luotava samanniminen piilotettu kenttä // jotta tieto siitä, mitä painiketta napsautettiin, välitetään palvelimelle var allFormFields = form.getElementsByTagName("input"); for (var i=0; i=7

Eli asetamme parametrin sallimaan lähettämisen, jos kenttä sisältää yli 7 merkkiä. Toisin sanoen painike aktivoituu vasta kentässä, jossa on määritetty tämä parametri ei tule 7 tai lisää hahmoja. Kysytään seuraavat parametrit. Nimessä on 2 merkkiä, postissa - 5 ja numero 7. Käsikirjoituksen valmis 6. rivi näyttää tältä:

If(nimi.pituus >=2 && sähköposti.pituus >=5 && puhelin.pituus >=7) (

Niille, jotka ovat kiinnostuneita kysymyksestä - Kuinka ilmoittaa enimmäismäärä hahmot? . Vastaus: kirjoita attribuutti HTML-koodin syöttökenttään

Max pituus = 15"

joka asettaa rajoituksen 15 merkkiin. Kirjoita vain numerosi.

Rivit 7 ja 9 osoittavat tulevan painikkeemme tunnuksen - "LÄHETÄ" lomakkeesta, joka avataan, jos ehdot täyttyvät. SISÄÄN tässä tapauksessa tämä on #lähetä.

HTML-koodi

Laitetaan nyt yksinkertainen muoto kolmella kentällä. Lomakkeellemme lähetetään nimi, sähköpostiosoite ja puhelinnumero. Voit käyttää omaa lomakettasi.

Jotta kaikki toimisi, ensinnäkin - jotta Pakolliset kentät sinun täytyy lisätä tapahtuma -

Onkeyup="checkParams()"

joka aloittaa käsikirjoituksen.

Toiseksi, lisää painikkeeseen estetty attribuutti, jonka komentosarja peruuttaa, jos vaaditut kentät on täytetty.

Kolmanneksi syöttökentillä on oltava tunnus, joka on myös osoitettu skriptissä, kuten edellä sanoin.

Siinä koko menetelmä. Se ei ole monimutkaista, vaikka artikkeli ei ole lyhyt. Jos luet kaiken huolellisesti ja ymmärrät sen, sinulla ei pitäisi olla vaikeuksia.

Tämä menetelmä auttoi minua luotaessani lomakkeita, jotka käyttävät ajaxia ja lähettävät sähköpostin lataamatta sivua uudelleen, riippumatta siitä, onko kentät täytetty. Eli jos henkilö alkaa yksinkertaisesti painaa painiketta, tyhjiä kirjeitä lähetetään, mutta painike on estetty eikä salli tätä tehdä.

Siinä kaikki, kiitos huomiosta. 🙂