Комментарии 9
Можно перейти на какое-нибудь из полей формы, нажать на клавишу enter или return – и форма будет отправлена.
а еще отправляют формы с помощью стандартного type="submit" ?
я конечно не фронт, но я чёт давно не встречал в своих проектах стандартные html формы которые на бек отправляют
У формы есть onsubmit. По-хорошему, отправку делают обработкой этого события с preventDefault, а не через onclick кнопки. Так и Enter в полях будет работать привычным образом, и всякие средства автозаполнения, и утилиты для Accessibility.
Возможно я вас удивлю, но это много где встречается. Да хотя бы взять страницу входа (авторизации), почти везде используется отправка формы с типом "submit". Зачем изобретать велосипед, если "из коробки" все прекрасно работает? =)
На мой взгляд, ваше предложенное решение, когда мы в фоне отправляем запрос (который может, в зависимости от скорости сети, сервера и т.п., длиться Х секунд) и оставляем кнопку активной ведет к дезориентации.
Как пользователь поймет, что кнопка отработала? Может, мышка заглючила и кнопка не нажалась.
Мне кажется, лучшим решением является:
1. блокировать кнопка
2. в кнопке менять текст (если было "Сохранить", то на "Сохраняем..", если было "Изменить", то на "Изменяем.." и т.п., или на обощенное "Пожалуйста, подождите..."
3. добавить слева от текста в кнопке динамичную иконку, по типау ajax-loader
Такой подход однозначно отображает текущее состояние формы.
В случае ошибки, вернуть кнопку в первоначальный вид и отобразить значимое сообщение рядом с кнопкой.
одно другому не мешает, у него в конце для кнопки тоже добавляется "opacity: 0.8".
суть статьи блокировать отправку формы не disable на button а вручную в onsubmit. Остальное уже по вкусу.
Как пользователь поймет, что кнопка отработала?
Написать рядом что-то такое "Депеша отправлена на сервер. Просим соблюдать спокойствие. В ближайшее время ответ придет. И не надо мучить кнопку".
Начнем с того, что он не делает того, на что рассчитан. Одно то, что кнопка блокирована, не означает, что отправить форму становится невозможно. Можно перейти на какое-нибудь из полей формы, нажать на клавишу enter или return – и форма будет отправлена.
Насколько мне известно, с этим проблем не должно быть так как (по крайней мере основные) браузеры стандартное событие submit по нажатию Enter при фокусе на поле ввода пытаются выполнять через эмуляцию нажатия первой submit-кнопки (если они вообще там есть) в форме, включая указание её в событии как submitter. И если она имеет disabled, то соответственно событие не отправляется (даже если после неё есть другие активные button/input[type=submit/image]>).
Но про рефокус не задумывался, спасибо.
Пожалуй, плюсану-ка я в карму за то, что кто-то реально думает про "тех пользователей, которые не 99%+". Это хорошая практика. Иногда мне кажется, что этой практике следуют очень не все.
Не замечать того, что в stateless протокол уже лет 30 всеми правдами и неправдами пытаются запихнуть state - это конечно не проблема.
Разработчики строят вокруг него (протокола) кучу фреймворков, библиотек и т.п. для реализации одних и тех же велосипедов, отличающихся количеством катафотов и местами куда их можно прикрутить.
Гораздо важнее то, что некто неправильно дисаблит кнопки на клиенте - это же может привести к тому что функциональноть по развешиванию катафотов окажется нафиг не нужна в реальности.
В реальности нужны удобство разработки и надежность эксплуатации.
Не нужно блокировать кнопки