Metoda submit() a formularului. submit() - handler pentru trimiterea formularului către server Trimiteți formularul

Submit() - instalează un handler pentru trimiterea formularului către server sau declanșează acest eveniment.

Metoda are trei utilizări.

Trimiteți(tratament)

• eventData - un obiect care conține date care trebuie transmise handler-ului. Trebuie să fie în formatul (fNume1:valoare1, fNume2:valoare2, ...) ;
• handler - o funcție care va fi setată ca handler.

Ridică evenimentul de trimitere pe elementele paginii selectate.

În primele două cazuri de utilizare, metoda este analogă cu .on("submit", handler) , iar în al treilea caz, analogă cu .trigger("submit") .

Evenimentul de trimitere are loc chiar înainte ca formularul să fie trimis la server, iar în handler puteți declanșa anularea formularului apelând metoda eventObject.preventDefault() sau pur și simplu returnând false . Evenimentul de trimitere poate fi legat doar de elementul formular.

Formularele pot fi trimise fie apăsând explicit , , sau , fie apăsând Enter când anumite elemente ale formularului sunt focalizate.

De exemplu, să ne uităm la HTML:

Un handler de evenimente poate fi atașat unui formular:

$("#target").submit(function(event) ( alert("Handler pentru .submit() numit."); event.preventDefault(); ));

Acum, când este trimis formularul, va fi afișat un mesaj. Acest eveniment are loc înainte de expedierea efectivă, așa că putem anula această acțiune apelând .preventDefault() pe obiectul eveniment sau returnând false de la handler. Putem declanșa un eveniment manual când se face clic pe alt element:

$("#other").click(function() ( $("#target").submit(); ));

După executarea acestui cod, va fi emis și un mesaj, dar va fi declanșată acțiunea implicită de trimitere a formularului, astfel încât formularul va fi trimis.

Evenimentul de trimitere JavaScript nu apare Internet Explorer. Cu toate acestea, scripturile care se bazează pe delegarea evenimentului cu un eveniment de expediere vor funcționa în mod constant browsere diferiteîncepând cu jQuery 1.4, care a normalizat comportamentul evenimentului.

Evenimentul submit() este doar o prescurtare pentru .on("submit", handler) , așa că puteți elimina handlerul instalat folosind .off("submit")

Formele și lor elemente copil nu ar trebui să folosească nume de intrare sau identificatori care intră în conflict cu proprietățile formularului, cum ar fi trimiterea, lungimea sau metoda. Conflictele de nume pot provoca blocări.

Instalează un handler de trimitere a formularelor pe server sau declanșează acest eveniment. Metoda are trei cazuri de utilizare:

handler(eventObject) - o funcție care va fi setată ca handler. Când este apelat, va primi un obiect eveniment eventObject .

handler(eventObject) - vezi mai sus.
eventData - date suplimentare transmise handlerului. Ele trebuie să fie reprezentate printr-un obiect în formatul: (fNume1:valoare1, fNume2:valoare2, ...) .

Puteți elimina un handler instalat folosind metoda unbind().

Toate cele trei opțiuni pentru utilizarea metodei sunt analoge ale altor metode (vezi mai sus), astfel încât toate detaliile utilizării submit() pot fi găsite în descrierea acestor metode.

Evenimentul de trimitere are loc chiar înainte ca formularul să fie trimis la server, iar în handler puteți declanșa anularea formularului apelând metoda eventObject.preventDefault() sau pur și simplu returnând false .

În IE, evenimentul de trimitere, spre deosebire de alte evenimente, nu are proprietatea de a „bulbore în ierarhie”. Cu toate acestea, începând cu jQuery-1.4, această defecțiune a fost eliminată și trimiterea handlerelor de evenimente instalate pe elementele care se află deasupra elementului de formular din ierarhie vor fi notificate despre viitoarea trimitere a datelor către server.

// instalează un handler de evenimente de trimitere pentru elementul cu identificatorul foo, // apoi dezactivează trimiterea de date către server $("#foo" ) .submit (funcție () ( alert ("Formular foo a fost trimis la server." ); return false ;)); // apelează evenimentul submit pe elementul foo $("#foo" ) .submit () ; // instalați un alt handler de evenimente submit, de data aceasta pentru elemente // cu clasa bloc. Să transmitem date suplimentare handler-ului $(".block" ) .submit (( a: 12 , b: "abc" ) , funcția (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alertă ("Formularul foo a fost trimis la server." + "Date transmise la handler al acestui eveniment: " + externalData ) ; ) );

Apelarea metodei de trimitere() din formular nu este același lucru cu a face clic pe butonul de trimitere. Când această metodă este apelată, va fi efectuată doar a treia dintre cele trei acțiuni de mai sus - trimiterea datelor la server. Că nu ar trebui să genereze un apel de handler onClick butoane de trimitere, destul de înțeles - la urma urmei, încercăm să trimitem date ocolind butonul de trimitere (care, apropo, poate să nu existe deloc). Dar nici handlerul de evenimente onSubmit al formularului nu este numit - acest lucru este neașteptat pentru mulți. Nu vom judeca cât de logic este acest lucru (și de ce acest comportament diferă de comportamentul metodei resetare(), vezi mai jos), ci pur și simplu ilustrați acest efect introducând în exemplul anterior un link care apelează metoda Trimite():

Apelați metoda submit() a formularului

5.8. Metoda submit() nu apelează handlerul onSubmit

Astfel, datele pot ajunge la server fără a fi mai întâi verificate de un script JavaScript. Cum poți forța browserul să apeleze handlerul onSubmit? Pentru a face acest lucru, este posibil să accesați direct acest handler: document.f.onsubmit(). Rămâne de presupus că după aceasta metoda Trimite() nu ar trebui să fie apelat întotdeauna, ci numai dacă onSubmit fie nu a returnat nicio valoare, fie a returnat true, cu alte cuvinte, dacă nu a returnat false. În sfârșit obținem:

Apelați submit() cu pre-verificare onSubmit

5.9. Apel forțat la Submit înainte de trimitere()

Există o altă modalitate de a iniția trimiterea datelor formulare, ocolind butonul de trimitere (pe care, apropo, formularul poate să nu îl aibă). Dacă se pune accentul pe orice câmp de text al formularului și utilizatorul apasă Enter, atunci (în majoritatea browserelor) va fi apelat handlerul de evenimente onSubmit al formularului și trimiterea datelor la server.

Introduceți text și apăsați Enter:

5.10. Trimiterea datelor din formular apăsând Enter

Această metodă funcționează mai logic decât metoda Trimite(), deoarece Datele trimise către server nu evită verificarea preliminară de către operatorul onSubmit.

butonul de resetare

Butonul de resetare ( resetare) vă permite să readuceți toate câmpurile formularului la starea inițială pe care o aveau atunci când pagina s-a încărcat. Făcând clic pe butonul de resetare, rezultă următoarea secvență de acțiuni ale browserului:

1. apelarea handler-ului de evenimente onClick la acest buton;

2. apelarea handler-ului de evenimente onReset al formularului;

3. Restabiliți valorile implicite în toate câmpurile formularului.

Apelarea metodei clic() la butonul de resetare echivalează cu apăsarea acestui buton, adică. conduce la aceleași trei acțiuni:

Apelați metoda click() a butonului de resetare

5.11. Apelarea metodei click() pe butonul de resetare

Există modalități de a reseta formularul în starea initiala ocolind butonul de resetare (pe care, apropo, formularul poate să nu îl aibă). În primul rând, aceasta metoda de resetare a apelului() la formular. În al doilea rând, dacă accentul este pe orice câmp sau buton din formular, puteți apăsa tasta Esc. Exemplu:

Schimbați textul și apoi apăsați Esc (sau linkul).
Apelați metoda reset() a formularului

5.12. Resetați formularul făcând clic Tastele Esc

După cum puteți vedea, ambele metode nu numai că resetează formularul, ci apelează și handlerul de evenimente onReset al formularului. Deci metoda resetare() se comportă mai logic și previzibil, Mai degrabă decât Trimite().

Buton grafic

Un buton grafic este un tip de buton de trimitere. Diferența sa este că, în loc de un buton cu o inscripție, utilizatorul va vedea o imagine pe care se poate face clic:

În plus, atunci când utilizatorul clicuri faceți clic pe butonul grafic, apoi nu numai datele introduse în câmpurile formularului, ci și coordonatele indicatorului mouse-ului relativ la colțul din stânga sus al imaginii vor fi trimise către server. Din păcate, nu este posibilă interceptarea acestor coordonate într-un program JavaScript. Dacă trebuie să lucrați cu aceste coordonate, atunci se recomandă să creați în loc de un buton grafic card activ folosind un recipient.

Butoanele grafice au o serie de ciudatenii. De exemplu, fiind atât un buton, cât și o imagine, din anumite motive lipsesc ca în colecția document.f. elemente, și în colecția document.images (IE 7, Mozilla Firefox). Ca urmare, acestea nu sunt luate în considerare în numărul total de elemente de formular (document.f. lungime), nici în numărul total de imagini din document (document.images. lungime).

Cum se accesează un astfel de buton? Acest lucru se poate face, de exemplu, prin setarea atributului ID:

iar apoi în program scriind: var knopka = document. getElementById("d1"). După aceea, putem accesa proprietățile acestui buton, de exemplu knopka.src, precum și metoda knopka. clic(). Următorul exemplu arată că apelarea metodei click() al unui buton grafic este „aproape” echivalent cu apăsarea acestui buton, adică apelează managerii secvenţial onClick butoane, onSubmit a formularului și transmite date către server (dar ce se transmite ca coordonate ale cursorului mouse-ului?):

5.13. Apelarea metodei click() pe un buton grafic

Deoarece butoanele grafice sunt folosite destul de rar, vom înceta să le discutăm aici.

O anumită funcție de gestionare este „legată” la „onSubmit” al formularului folosind funcția standard addHandler/addEvent (funcții utile).
Deci, dacă formularul este trimis făcând clic pe intrare, funcția de gestionare este apelată,
dacă prin form.submit(), atunci nu.
Și de ce? Cum pot repara?

Conduceți de-a lungul drumului, apoi brusc boom, „lumină roșie” (onSubmit), un eveniment totuși! Ei bine, îl procesezi în mod natural - apăsați frânele (form.submit()), continuați, apoi hopa, bobby-ul sare afară, apăsați din nou frâna, dar din anumite motive lumina roșie nu apare. Și de ce?
Cum să o remediați - gândiți-vă la modul în care funcționează browserul, funcționează așa cum trebuie și nu așa cum doriți. onSubmit este un eveniment, form.submit() este doar handlerul său de nivel scăzut, folosit de browser însuși și disponibil programatorului după cum este necesar. De ce ar iniția acest eveniment? Deci nu este departe de a fi blocat. Una este să concepi o acțiune, alta este să o duci la îndeplinire. O idee/gând/eveniment și o metodă de manipulare/pedală/instrument sunt două lucruri diferite. Nu este nevoie să atașați un handler la o metodă, aceasta este o prostie. În cel mai simplu caz, apelați funcția handler înainte de a apela form.submit().

Și la grămadă... Caracteristica este documentată. MSDN:

FORM.submit()
Metoda de trimitere nu invocă handlerul de evenimente onsubmit. Apelați direct managerul de evenimente onsubmit. Atunci când se utilizează Microsoft Internet Explorer 5.5 și versiuni ulterioare, puteți apela metoda fireEvent cu o valoare onsubmit în parametrul sEvent.

Când utilizatorul apasă introducere ceva de genul

Dacă (form.onSubmit()) form.submit();

Trage o concluzie.
Dacă form.submit() apelează form.onSubmit() atunci va fi o recursivitate.
Pentru a remedia acest lucru, trebuie să utilizați o versiune extinsă a „funcției standard addHandler/addEvent”, care vă permite să declanșați evenimente. În IE, desigur, puteți face fără acest lucru - priviți spre fireEvent. În FF poți face și ceva asemănător, dar mult mai complicat.

Dvornov Roman[dosar], mai universal - așa:
if (form.onsubmit() != false) form.submit();
Pentru că, în primul rând, JavaScript este sensibil la majuscule și minuscule (nu puteți scrie form.onSubmit) și, în al doilea rând, trimiterea datelor către server ar trebui să aibă loc nu numai când onsubmit() a returnat adevărat, ci și atunci când nu a returnat nimic (de exemplu, dacă onsubmit handler conține doar o alertă sau utilizatorul nu a specificat nicio acțiune în acest handler).

Thirteensmay[dosar], desigur, comparația cu semaforul roșu, pedala și bobby este frumoasă! :) Dar, din păcate, nu explică acest fenomen. Pentru că ar trebui să fie în mod egal aplicabil oricăror manipulatori și metode, ceea ce, totuși, nu este respectat. Permiteți-mi să formulez mai precis întrebarea rămasă deschisă:

Metoda click() pe un hyperlink presupune apelarea handler-ului onClick pentru acel link
- metoda click() pentru butonul ORICE formular - presupune apelarea handler-ului onClick al acestui buton
- metoda reset() pentru formular - presupune apelarea handler-ului onReset pentru formular
- DAR metoda submit() a formularului NU implică apelarea handler-ului onSubmit al formularului!

Ce raționament ar putea exista (pentru dezvoltatorii de limbi sau browsere?) pentru a face asta atât de diferit?

Odată cu apariția HTML5, formularele au devenit mai versatile. Elementul de intrare poate conține acum adrese de email, datele și multe altele, pot fi marcate ca fiind necesare fără a recurge la javascript - și acestea sunt doar câteva dintre cele mai valoroase caracteristici. De asemenea, acum puteți utiliza mai multe butoane de trimitere pentru un formular și acum este posibil să mutați butonul de trimitere în afara formularului.

Până de curând, puteai să inserezi un singur buton de trimitere într-un formular, altfel formularul ar procesa doar ultimul buton. Adăugând method="post" și url la elementul de formular "form" am obținut un formular de lucru.

Acum situația s-a schimbat - noi proprietăți „formmethod” și „formation” au fost adăugate la HTML. Acestea vă permit să adăugați o metodă de postare și o adresă URL direct la butonul „trimite”, deci nu trebuie să adăugați nimic în formular. Având acești parametri atașați butonul „Trimite”, mai degrabă decât formularului, adaugă mai multă flexibilitate formularului. Acum puteți face cât mai multe butoane sunt necesare pentru formular.

Acum fiecare buton „trimite” aparține unei adrese URL diferite și toate acestea elimină nevoia de a scrie cod javascript în timpul aspectului. Toate acestea funcționează excelent și acum, când dați clic pe un buton, formularul va primi forma și metoda, care vor suprascrie parametri standard metoda si actiune. Dacă formularul conține un buton obișnuit „trimitere” fără parametri noi, acesta va returna valorile de formular setate pentru elementul de formular.

Formmethod și proprietățile de formare sunt acceptate de toate browserele populare

Este un fapt general acceptat că toate elementele unei forme care îi aparțin trebuie să fie în interiorul elementului. Acest lucru reduce flexibilitatea în proiectarea formelor în sine. Datorită noului atribut „form”, acum orice element poate fi mutat în afara formularului și orice element de formular poate fi plasat în orice parte a paginii. Pentru a face acest lucru, trebuie doar să adăugați un ID în formular și apoi să adăugați valoarea acestui ID la toate elementele ca atribut.

Astăzi, atributul formular este acceptat de toate browserele populare, cu excepția Internet Explorer (până la versiunea 10).