Taka sytuacja. Zgłoszony został bug w aplikacji. Mamy formularz i po kliknięciu ENTER system chce wyjść z formularza, zamiast go submitować. O co chodzi!? [tu pomyśl] Już wiecie?
No ja nie wiedziałam. Cały przypadek został odkryty w wielkim, dosyć skomplikowanym formularzu Angulara Materiala. Sprawa ani trochę nie wyglądała sympatycznie. Jednak po uproszczeniu zawiłego kodu… źródło problemu staje się oczywiste. Popatrz, masz taki formularz:
See the Pen so simple form – bad option by sourire09 (@sourire09) on CodePen.
Wyobraź sobie, że uzupełniasz formularz. I chcesz go na szybko zatwierdzić. Klikasz ENTER. Zgadnijcie, jaką treść alertu zobaczycie na ekranie?
home!
Bo niby skąd przeglądarka ma wiedzieć, który przycisk chcemy kliknąć tym enterem? Jeśli na stronie nie znajduje żadnego type="submit" – klika pierwszy lepszy przycisk. O zgrozo!
Rozwiązanie problemu jest banalne. W prostych formularzach zdefiniuj przycisk zatwierdzający formularz za pomocą type="submit". W bardziej skomplikowanych sytuacjach, kiedy nie chcesz określać typu submit dla przycisku, który ma zadziałać po kliknięciu ENTER – po prostu nadaj type="button" wszystkim pozostałym przyciskom.
See the Pen so simple form – better idea by sourire09 (@sourire09) on CodePen.
Tadaaaaam!
