Me ardhjen e HTML5, format janë bërë më të gjithanshme. Elementi i hyrjes tani mund të përmbajë adresa emaili, data dhe më shumë, të cilat mund të shënohen sipas nevojës pa përdorur javascript - dhe këto janë vetëm disa nga veçoritë më të vlefshme. Gjithashtu, tani mund të përdorni disa butona dërgimi për një formular dhe tani është e mundur të zhvendosni butonin e paraqitjes jashtë formularit.
Dorëzimet e shumta brenda një formulariDeri kohët e fundit, ju mund të futni vetëm një buton dërgimi në një formular, përndryshe formulari do të përpunonte vetëm butonin e fundit. Duke shtuar metod="post" dhe url në elementin e formës "formë", kemi marrë një formë pune.
Tani situata ka ndryshuar - vetitë e reja "formmethod" dhe "formaction" janë shtuar në HTML. Ato ju lejojnë të shtoni një metodë postimi dhe url direkt në butonin "submit", kështu që nuk keni nevojë të shtoni asgjë në formular. Duke i bashkangjitur këtyre parametrave butonin "dorëzo" në vend të formularit, të gjitha këto shtojnë më shumë fleksibilitet në formular. Tani mund të bëni aq butona sa të nevojiten për formularin.
Tani çdo buton "dorëzo" i përket një URL të ndryshme, dhe e gjithë kjo eliminon nevojën për të shkruar kodin javascript gjatë paraqitjes. E gjithë kjo funksionon mirë dhe tani kur klikoni në një buton, formulari do të marrë metodën dhe formimin, të cilat do të mbishkruajnë metodën standarde dhe parametrat e veprimit. Nëse formulari përmban një buton të rregullt "dorëzo" pa parametra të rinj, ai do të kthejë vlerat e formularit të vendosur për elementin e formularit.
Metoda e formës dhe vetitë e formimit mbështeten nga të gjithë shfletuesit e njohur
Elementet e formës (hyrja, përzgjedhja, zona e tekstit) jashtë formësËshtë një fakt i pranuar përgjithësisht që të gjithë elementët e një forme që i përkasin duhet të jenë brenda elementit. Kjo zvogëlon fleksibilitetin në hartimin e vetë formave. Falë atributit të ri "formë", tani çdo element mund të zhvendoset jashtë formularit dhe çdo element i formës mund të vendoset në çdo pjesë të faqes. Për ta bërë këtë, thjesht duhet të shtoni një ID në formular dhe më pas të shtoni vlerën e kësaj ID në të gjithë elementët si atribut.
Sot, atributi i formës mbështetet nga të gjithë shfletuesit e njohur, me përjashtim të Internet Explorer (deri në versionin 10).
Instalon një mbajtës të paraqitjes së formularit në server ose e ndez këtë ngjarje. Metoda ka tre raste përdorimi:
mbajtës (eventObject) - një funksion që do të vendoset si mbajtës. Kur thirret ai do të marrë një objekt ngjarje ngjarjeObjekt .
mbajtës (eventObject) - shih më lart.
eventData - të dhëna shtesë që i kalohen mbajtësit. Ato duhet të përfaqësohen nga një objekt në formatin: (fEmri1:value1, fEmri2:value2, ...) .
Mund të hiqni një mbajtës të instaluar duke përdorur metodën unbind().
Të tre opsionet për përdorimin e metodës janë analoge të metodave të tjera (shih më lart), kështu që të gjitha detajet e përdorimit të submit() mund të gjenden në përshkrimin e këtyre metodave.
Ngjarja e dërgimit ndodh pak përpara se formulari të dorëzohet në server dhe në mbajtës mund të aktivizoni formularin që do të anulohet duke thirrur metodën eventObject.preventDefault() ose thjesht duke kthyer false .
Në IE, ngjarja e dorëzimit, ndryshe nga ngjarjet e tjera, nuk ka vetinë e "zbulimit të hierarkisë". Megjithatë, duke filluar me jQuery-1.4, kjo e metë është eliminuar dhe mbajtësit e ngjarjeve të instaluara në elementë që shtrihen mbi elementin e formës në hierarki do të njoftohen për dërgimin e ardhshëm të të dhënave në server.
Shembull// instaloni një mbajtës të ngjarjeve të dorëzimit për elementin me identifikues foo, // më pas çaktivizoni dërgimin e të dhënave në server $("#foo" ) .submit (funksioni () ( alarm ("Form foo është dorëzuar në server." kthej false ;)) ; // thirrni ngjarjen e paraqitjes në elementin foo $("#foo") .submit () ; // instaloni një mbajtës tjetër të ngjarjeve të paraqitjes, këtë herë për elementet // me klasën e bllokut. Le t'i kalojmë të dhëna shtesë trajtuesit $(".block") .submit (( a: 12 , b: "abc") , funksioni (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alarm ("Form foo është dërguar në server." + "Të dhënat i kaluan mbajtësit të kësaj ngjarjeje: " + externalData ) ;) ) ;
Një funksion i caktuar mbajtës është "i lidhur" me "onSubmit" të formularit duke përdorur funksionin standard addHandler/addEvent (Funksione të dobishme).
Pra, nëse formulari dorëzohet duke klikuar në hyrje, thirret funksioni mbajtës,
nëse nëpërmjet formës.submit(), atëherë jo.
Dhe pse? Si mund ta rregulloj?
Jeni duke vozitur përgjatë rrugës, pastaj papritmas boom, "dritë e kuqe" (onSubmit), një ngjarje megjithatë! Epo, ju e përpunoni atë natyrshëm - shtypni frenat (form.submit()), ndizni, dhe më pas oops, bobi kërcen jashtë, ju goditni përsëri frenat, por për disa arsye drita e kuqe nuk shfaqet. Dhe pse?
Si ta rregulloni - mendoni se si funksionon shfletuesi, funksionon ashtu siç duhet dhe jo ashtu siç dëshironi. onSubmit është një ngjarje, form.submit() është thjesht mbajtësi i tij i nivelit të ulët, i përdorur nga vetë shfletuesi dhe i disponueshëm për programuesin sipas nevojës. Pse do ta niste ai këtë ngjarje? Pra, nuk është larg nga të mbyllësh telefonin. Një gjë është të konceptosh një veprim, tjetër gjë ta realizosh. Një ide/mendim/ngjarje dhe një metodë mbajtëse/pedale/instrumenti janë dy gjëra të ndryshme. Nuk ka nevojë të bashkëngjitni një mbajtës në një metodë, kjo është e pakuptimtë. Në rastin më të thjeshtë, thirrni funksionin mbajtës përpara se të thërrisni form.submit().
Dhe deri në grumbull... Tipari është i dokumentuar. MSDN:
FORM.submit()
Metoda e dorëzimit nuk thërret mbajtësin e ngjarjeve onsubmit. Telefononi drejtpërdrejt mbajtësin e ngjarjeve onsubmit. Kur përdorni Microsoft Internet Explorer 5.5 dhe versionet më të reja, mund të telefononi metodën fireEvent me një vlerë onsubmit në parametrin sEvent.
Kur përdoruesi shtyp të dhëna diçka si
Nëse (forma.onSubmit()) form.submit();
Nxirrni një përfundim.
Nëse forma.submit() thërret form.onSubmit() atëherë do të jetë një rekursion.
Për ta rregulluar këtë, duhet të përdorni një version të zgjeruar të "funksionit standard addHandler/addEvent", i cili ju lejon të aktivizoni ngjarje. Në IE, natyrisht, ju mund të bëni pa këtë - shikoni drejt fireEvent. Në FF ju gjithashtu mund të bëni diçka të ngjashme, por shumë më të komplikuar.
Dvornov Roman [dosja], më universalisht - si kjo:
if (formë.onsubmit() != false) form.submit();
Sepse, së pari, JavaScript është sensitive (nuk mund të shkruani form.onSubmit), dhe së dyti, dërgimi i të dhënave në server duhet të ndodhë jo vetëm kur onsubmit() kthehet true, por edhe kur nuk kthen asgjë (për shembull, nëse trajtuesi onsubmit përmban vetëm një sinjalizim, ose përdoruesi nuk ka specifikuar fare veprime në këtë mbajtës).
Thirteensmay[dossier], sigurisht, krahasimi me dritën e kuqe, pedale dhe bobby është i bukur! :) Por, për fat të keq, nuk e shpjegon këtë fenomen. Sepse duhet të jetë njëlloj i zbatueshëm për çdo mbajtës dhe metodë, gjë që, megjithatë, nuk respektohet. Më lejoni të formuloj më saktë pyetjen e mbetur të hapur:
Metoda click() në një hiperlidhje përfshin thirrjen e mbajtësit onClick për atë lidhje
- metoda click() për butonin CDO formular - përfshin thirrjen e mbajtësit onClick të këtij butoni
- Metoda reset() për formularin - kërkon thirrjen e mbajtësit onReset për formularin
- POR metoda e formularit submit() NUK kërkon thirrjen e mbajtësit të formularit onSubmit!
Çfarë arsyetimi mund të ketë (për zhvilluesit e gjuhëve apo shfletuesit?) për ta bërë këtë ndryshe?
Thirrja e metodës së dorëzimit() e formularit nuk është e njëjtë me klikimin e butonit "dorëzo". Kur thirret kjo metodë, do të kryhet vetëm e treta nga tre veprimet e mësipërme - dërgimin e të dhënave te serveri. Që nuk duhet të gjenerojë një thirrje mbajtëse ne klikim butonat e dërgimit, mjaft të kuptueshme - në fund të fundit, ne po përpiqemi të dërgojmë të dhëna duke anashkaluar butonin e dërgimit (i cili, nga rruga, mund të mos ekzistojë fare). Por mbajtësi i ngjarjeve onSubmit i formularit gjithashtu nuk thirret - kjo është e papritur për shumë njerëz. Ne nuk do të gjykojmë se sa logjike është kjo (dhe pse kjo sjellje ndryshon nga sjellja e metodës rivendosur(), shih më poshtë), por thjesht ilustroni këtë efekt duke futur në shembullin e mëparshëm një lidhje që thërret metodën dorëzojë():
Thirrni metodën e paraqitjes() të formularit
5.8. Metoda Submit() nuk thërret mbajtësin onSubmit
Kështu, të dhënat mund të shkojnë në server pa u kontrolluar më parë nga një skript JavaScript. Si mund ta detyroni shfletuesin të telefonojë mbajtësin onSubmit? Për ta bërë këtë, është e mundur të aksesoni drejtpërdrejt këtë mbajtës: document.f.onsubmit(). Mbetet të supozohet se pas kësaj metoda dorëzojë() nuk duhet të thirret gjithmonë, por vetëm nëse onSubmit ose nuk kthen ndonjë vlerë ose kthen true, me fjalë të tjera, nëse nuk ktheu false. Më në fund marrim:
Telefononi dërgoni() me kontrollin paraprak onSubmit
5.9. Detyroni thirrjen në Submit përpara se të dorëzoni()
Ekziston një mënyrë tjetër për të filluar dërgimin e të dhënave formularët, duke anashkaluar butonin e dërgimit (të cilin, nga rruga, formulari mund të mos e ketë). Nëse fokusi është në ndonjë fushë teksti të formularit dhe përdoruesi shtyp Enter, atëherë (në shumicën e shfletuesve) do të thirret mbajtësi i ngjarjeve onSubmit të formularit dhe dërgimin e të dhënave te serveri.
Futni tekstin dhe shtypni Enter:
5.10. Dërgimi i të dhënave të formularit duke shtypur Enter
Kjo metodë funksionon më logjikisht sesa metoda dorëzojë(), sepse Të dhënat e dërguara në server nuk shmangin verifikimin paraprak nga mbajtësi i onSubmit.
butoni i rivendosjes
Butoni i rivendosjes ( rivendosur) ju lejon të ktheni të gjitha fushat e formularit në gjendjen origjinale që kishin kur u ngarkua faqja. Klikimi i butonit të rivendosjes rezulton në sekuencën e mëposhtme të veprimeve të shfletuesit:
1. thirrja e mbajtësit të ngjarjeve ne klikim në këtë buton;
2. thirrja e mbajtësit të ngjarjeve onReset të formularit;
3. Rivendosni vlerat e paracaktuara në të gjitha fushat e formularit.
Thirrja e metodës së klikimit() në butonin e rivendosjes është e barabartë me shtypjen e këtij butoni, d.m.th. çon në të njëjtat tre veprime:
Thirrni metodën click() të butonit të rivendosjes
5.11. Thirrja e metodës click() në butonin e rivendosjes
Ka mënyra për të rivendosur formularin në gjendjen e tij origjinale, duke anashkaluar butonin e rivendosjes (të cilin, nga rruga, forma mund të mos e ketë). Së pari, kjo metoda e rivendosjes së thirrjes() në formular. Së dyti, nëse fokusi është në ndonjë fushë ose buton në formular, mund të shtypni tastin Esc. Shembull:
Ndryshoni tekstin dhe më pas shtypni Esc (ose lidhjen).
Thirrni metodën reset() të formularit
5.12. Rivendosni formularin duke shtypur tastin Esc
Siç mund ta shihni, të dyja metodat jo vetëm që rivendosin formularin, por gjithashtu thërrasin mbajtësin e ngjarjeve onReset të formularit. Pra, metoda rivendosur() sillet më logjikisht dhe e parashikueshme, më mirë se dorëzojë().
Butoni grafik
Një buton grafik është një lloj butoni i dorëzimit. Dallimi i tij është se në vend të një butoni me një mbishkrim, përdoruesi do të shohë një foto që mund të klikohet:
Përveç kësaj, kur përdoruesi klikimeve klikoni në butonin grafik, atëherë jo vetëm të dhënat e futura në fushat e formularit, por edhe koordinatat e treguesit të miut në lidhje me këndin e sipërm të majtë të figurës do të dërgohen në server. Fatkeqësisht, nuk është e mundur të përgjohen këto koordinata në një program JavaScript. Nëse keni nevojë të punoni me këto koordinata, atëherë në vend të një butoni grafik, rekomandohet të krijoni një hartë aktive duke përdorur një enë.
Butonat grafikë kanë një sërë çudirash. Për shembull, duke qenë edhe buton edhe imazh, për ndonjë arsye mungojnë si në koleksionin document.f. elementet, dhe në koleksionin document.images (IE 7, Mozilla Firefox). Si rezultat, ato nuk llogariten në numrin e përgjithshëm të elementeve të formularit (dokument.f. gjatësia), as në numrin total të imazheve në dokument (dokument.imazhe. gjatësia).
Si të hyni në një buton të tillë? Kjo mund të bëhet, për shembull, duke vendosur atributin ID:
dhe më pas në program duke shkruar: var knopka = dokument. getElementById("d1"). Pas kësaj, ne mund të aksesojmë vetitë e këtij butoni, për shembull knopka.src, si dhe metodën knopka. klikoni(). Shembulli i mëposhtëm tregon se duke thirrur metodën e klikimit() e një butoni grafik është "pothuajse" ekuivalente me shtypjen e këtij butoni, d.m.th. thërret mbajtësit në mënyrë sekuenciale ne klikim butonat, onSubmit e formularit dhe transmeton të dhënat në server (por çfarë transmetohet si koordinata të kursorit të miut?):
Thirrni metodën click() të një butoni grafik5.13. Thirrja e metodës click() në një buton grafik
Meqenëse butonat grafikë përdoren mjaft rrallë, ne do të ndalojmë së diskutuari për to këtu.
Submit() - instalon një mbajtës për dërgimin e formularit në server, ose aktivizon këtë ngjarje.
Metoda ka tre përdorime.
Dorëzo (trajtues)
- eventData - një objekt që përmban të dhëna që duhet t'i kalohen mbajtësit. Duhet të jetë në formatin (fName1:value1, fEmri2:value2, ...) ;
- mbajtës - një funksion që do të vendoset si mbajtës.
Paraqisni () |
Ngrit ngjarjen e paraqitjes në elementët e zgjedhur të faqes.
Në dy rastet e para të përdorimit, metoda është analoge me .on("submit", handler) , dhe në rastin e tretë, analoge me .trigger("submit") .
Ngjarja e dërgimit ndodh pak përpara se formulari të dorëzohet në server dhe në mbajtës mund të aktivizoni formularin që do të anulohet duke thirrur metodën eventObject.preventDefault() ose thjesht duke kthyer false . Ngjarja e paraqitjes mund të lidhet vetëm me elementin e formës.
Formularët mund të dorëzohen ose duke shtypur një , , ose , ose duke shtypur Enter kur elementë të caktuar të formës kanë fokus.
Për shembull, le të shohim HTML:
Një mbajtës ngjarjesh mund t'i bashkëngjitet një formulari:
$("#target").submit(funksion(ngjarje) ( alert("Thirret mbajtësi për .submit()."); event.preventDefault(); ));
$("#target" ) . paraqes(funksioni(ngjarja)( alarmi ("Thirret mbajtësi për .submit()." ); ngjarje. preventDefault(); } ) ; |
Tani, kur të dorëzohet formulari, do të shfaqet një mesazh. Kjo ngjarje ndodh përpara dërgimit aktual, kështu që ne mund ta anulojmë këtë veprim duke thirrur .preventDefault() në objektin e ngjarjes ose duke kthyer false nga mbajtësi ynë. Ne mund të aktivizojmë një ngjarje manualisht kur klikohet një element tjetër:
$("#other"). kliko (funksion() ( $("#target").submit(); ));
$("#other") . klikoni(funksioni()( $("#target" ) . dorëzoj(); } ) ; |
Pas ekzekutimit të këtij kodi, do të lëshohet gjithashtu një mesazh, por do të aktivizohet veprimi i paracaktuar i paraqitjes në formular, kështu që formulari do të dorëzohet.
Ngjarja e dërgimit të JavaScript nuk "flluska" në Internet Explorer. Sidoqoftë, skriptet që mbështeten në delegimin e ngjarjeve me një ngjarje dërgimi do të funksionojnë vazhdimisht nëpër shfletues që nga jQuery 1.4, i cili normalizoi sjelljen e ngjarjeve.
Për më tepërNgjarja submit() është vetëm një stenografi për .on("submit", handler) , kështu që ju mund të hiqni mbajtësin e instaluar duke përdorur .off("submit")
Formularët dhe elementët e tyre të vegjël nuk duhet të përdorin emra të dhënash ose identifikues që bien ndesh me vetitë e formularit si p.sh. dorëzimin, gjatësinë ose metodën. Konfliktet e emrave mund të shkaktojnë përplasje.
