Trimiteți formulare, formați onsubmit - blog-ul encoderului

Formularele pe paginile web sunt destul de frecvente. Aceasta este una dintre modalitățile cele mai utilizate pentru a trimite date către server, indiferent dacă este vorba de un login / parolă pentru introducerea cabinetului dvs. personal sau a unui coș de cumpărături într-un magazin online. Iată ultimul caz, și anume caracteristicile trimiterii coșului vor fi discutate.







Se pare că nu este nimic complicat, facem un formular standard cu mai multe intrări, un buton de trimitere și toate cazurile. Să presupunem că codul pentru afișarea conținutului coșului este aproximativ următorul:

Trimiteți formulare, formați onsubmit - blog-ul encoderului

Ie Avem 4 articole în comandă, pentru care este indicată cantitatea. Totul este bine când faceți clic pe butonul "Trimiteți comanda". Dar brusc problema a apărut - rareori, dar este nevoie să se schimbe numărul de poziții din ordine. Ceea ce face utilizatorul mediu este să conducă cantitatea necesară în câmpul de introducere și să apăsați "enter"! Pentru mine, un astfel de comportament a fost o surpriză, dar după cum sa dovedit foarte mulți nu se mișcă în altă poziție cu „tab-ul“ sau mouse-ul, și anume strâns „enter“! Vina este moștenirea Excel sau altceva, dar rezultatul este exact acest lucru. Particularitatea formularelor pe o pagină web este că, atunci când apăsați „enter“, în tipul elementului „de intrare“ este prezentat într-o formă care conține acest element. Ie în cazul în care utilizatorul dorea să schimbe mai multe poziții, primește trimiterea comenzii, modificând cantitatea pentru un singur element. Astfel, proprietatea utilă, nu prima vedere, devine din când în când un dezavantaj.







Iar această expediere are propriile particularități. În browserele Chrome și Safari, formularul este trimis întotdeauna când este apăsată tasta "enter". În browserele Internet Explorer, Firefox și Opera acest lucru se întâmplă dacă
a) Există un buton de prezentare în formular, așa cum este descris mai sus: , sau reprezentarea grafică a acestuia (tip = "imagine") sau
b) pentru Internet Explorer și Firefox în forma există doar o singură intrare cu tipul = „text“ sau type = „parola“, Opera sub forma ar trebui să fie nu mai mult de una dintre intrare de mai sus.

Cum de a rezolva problema? Doar eliminați butonul de depunere a formularului nu este posibil, același Chrome va trimite încă formularul pentru a "introduce", iar mulți utilizatori fără un buton nu vor înțelege cum să trimită comanda. Alocarea butonului "hand-click" la butonul de trimitere a formularului nu va fi de ajutor, deoarece formularul poate fi trimis prin "enter".

Căutați o cale de ieșire? Când trimiteți un formular, apare evenimentul de trimitere pentru formular. Acesta poate fi numit document.forms ["formular name"]. Submit () sau document.forms.formname.submit (). În descrierea formularului adăugăm evenimentul onSubmit, în etichetă

, toate celelalte, după cum sa dovedit, pot duce la erori. Funcția de tratare este definit pentru onSubmit poate aranja valori de verificare sau de ieșire a mesajelor la discreția dumneavoastră. În cazul meu, nu sunt necesare verificări - nu trebuie să reacționez la apăsarea "enter", deoarece intrarea mea arată astfel: Formularul nu este trimis. Ei bine, pentru a coș pot fi trimise în continuare (trebuie să fie cumva ordinele de a face) înlocui butonul prezintă butonul normal: Funcția să se ocupe de o simplă apăsare de buton: Acesta poate fi completat din nou, cu mesajul, sau verificați parametrii introduse de utilizator. O altă opțiune pentru a preveni aceste probleme - este adăugarea de 2 controale, cum ar fi săgeți în sus și în jos - pentru o schimbare a numărului de posturi în acest caz, câmpul de intrare este marcat ca readonly, modifica valoarea de la tastatura este imposibilă. Dar nu este întotdeauna convenabil pentru cantități mari în ordine.







Trimiteți-le prietenilor: