Форми на веб-сторінках зустрічаються досить часто. Це один з найбільш часто використовуваний спосіб відправити якісь дані на сервер, будь то логін / пароль для входу в особистий кабінет, або корзина замовлень в інтернет магазині. Ось про останній випадок, а саме про особливості відправки кошика піде мова.
Здавалося б немає нічого складного, робимо стандартну форму з декількома input, кнопкою відправки та й по всьому. Припустимо що код відображення вмісту кошика приблизно такий:
Тобто маємо 4 позиції в замовленні, для яких вказано кількість. Все відмінно відправляється при натисканні кнопки "Відправити замовлення". Але тут несподівано спливла проблема - нечасто, але виникає необхідність змінити кількість позицій в замовленні. Що робить середньостатистичний користувач - вбиває потрібну кількість в поле введення і тисне "enter"! Для мене така поведінка стало несподіванкою, але як виявилося дуже багато так і роблять, не переходять на іншу позицію з допомогою "tab" або мишки, а саме тиснуть "enter"! Виною тому спадщина excel або ще що, але результат виходить саме такий. Особливістю ж форм на веб-сторінці є те, що при натисканні на "enter" в елементі типу "input" відбувається відправлення форми, що містить цей елемент. Тобто в разі, коли користувач хотів змінити кілька позицій він отримує відправку замовлення, змінивши кількість лише для однієї позиції. Таким чином корисне не перший погляд властивість перетворюється часом в недолік.
Причому відправка ця має свої особливості. У брайузерах Chrome і Safari форма відправляється завжди при натисканні клавіші "enter". У браузерах Internet Explorer, Firefox і Opera це відбувається якщо
а) У формі є кнопка відправки, та що описана вище: , або її графічне представлення (type = "image") або
б) для Internet Explorer і Firefox в формі є тільки один input з type = "text" або з type = "password", для Opera в формі повинно бути не більше одного з вищеописаних input.
Як же вирішувати проблему? Просто прибрати кнопку відправки форми явно не вийде, той же Chrome все одно відправить форму по "enter", а багато користувачів без кнопки взагалі не зрозуміють як відправити замовлення. Призначення обробника button.onclick кнопці відправки форми теж не допоможе, оскільки форма може бути відправлена по "enter".
Шукаємо вихід? При відправці форми відбувається подія submit для форми. Воно може бути викликані як document.forms [ "ім'я форми"]. Submit () або document.forms.імя форми.submit (). В описі форми додаємо подія onSubmit, саме в тег