Отправка форм, form onSubmit

Формы на веб-страницах встречаются довольно часто. Это один из наиболее часто используемый способ отправить какие-то данные на сервер, будь то логин/пароль для входа в личный кабинет, или корзина заказов в интернет магазине. Вот о последнем случае, а именно об особенностях отправки корзины пойдет речь.

Казалось бы нет ничего сложного, делаем стандартную форму с несколькими input, кнопкой отправки и все дела. Допустим что код отображения содержимого корзины примерно такой:

<form action="adress" method="post">
<input type="text" id="tovar1" value="1">
<input type="text" id="tovar2" value="2">
<input type="text" id="tovar3" value="8">
<input type="text" id="tovar4" value="7">
<input type="submit"value="Отправить заказ">
</form>

form submit

Т.е. имеем 4 позиции в заказе, для которых указано количество. Все отлично отправляется при нажатии кнопки "Отправить заказ". Но тут неожиданно всплыла проблема - нечасто, но возникает необходимость изменить количество позиций в заказе. Что делает среднестатистический пользователь - вбивает нужное количество в поле ввода и жмет "enter"! Для меня такое поведение стало неожиданностью, но как оказалось очень многие так и делают, не переходят на другую позицию с помощью "tab" или мышки, а именно жмут "enter"! Виной тому наследие excel или еще что, но результат получается именно такой. Особенностью же форм на веб-странице является то, что при нажатии на "enter" в элементе типа "input" происходит отправка формы, содержащей этот элемент. Т.е. в случае, когда пользователь хотел изменить несколько позиций он получает отправку заказа, изменив количество лишь для одной позиции. Таким образом полезное не первый взгляд свойство превращается временами в недостаток.

Причем отправка эта имеет свои особенности. В брайузерах Chrome и Safari форма отправляется всегда при нажатии клавиши "enter". В браузерах Internet Explorer, Firefox и Opera это происходит если
а) В форме имеется кнопка отправки, та что описана выше: <input type="submit"value="Отправить заказ">, или ее графическое представление ( 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, именно в тег <form>, все остальное, как выяснилось может привести к ошибкам. В функции-обработчике определенной для onSubmit можно организовать проверку значений или вывод каких-либо сообщений, на Ваше усмотрение. В моем случае проверок не требуется - мне необходимо просто не реагировать на нажатие "enter", потому у меня запись выглядит так:

<form action="url" method="post" onSubmit="return false">
т.е. форма просто не отправляется. Ну а для того, чтобы корзину все-таки можно было отправить (надо же как-то заказы делать) заменяем кнопку отправки на обычный button:
<input type="button" name="send" value="Отправить заказ" onClick="validForm(this.form)"/>
Функция для обработки нажатия на кнопку:
function validForm(f) {
f.submit(); // Отправляем на сервер
}
Её можно дополнить опять же выводом сообщения, или проверкой введенных пользователем параметров. Еще один вариант решения описанной проблемы - это добавление 2х элементов управления, вроде стрелочек вверх и вниз - для изменения кол-ва позиций, в этом случае поле ввода отмечается как readonly, изменить его значение с клавиатуры невозможно. Но он не всегда удобен при больших количествах в заказе.