Кнопка «отправить». Просто и полезно.

[nooze]

Маленьким, но очень важным моментом еще является обратная активация конпки через разумный промежуток времени (1-2 минуты), если форма «не прошла», надо дать возможность попробовать повторить отправку, а то вы заставляете вбивать все заново

[khim]

Угу. У моего ISP так login сделан: вводишь неправильный пароль, тебе сообщают что ты неправ (AJAX рулит, типа), а кнопка отсылки — больше не работает.

[marazm]

Спасибо. В топике) +1 в карму

[freehome]

Делаю тоже самое в своем проекте.
Насколько я помню, можно и $('this').attr('disabled', 'true')

[sanchesfree]

ну если совсем без jQuery то и
...onclick=«this.disabled = true;»… :)

[nooze]

жестко, но зато в духе минимализма :)

[taliban]

без jQuery есть дофига всего интересного, и клином свет на ней не сошелся, т.к. есть полно библиотек не хуже… это так, между делом :)

[Temp1ar]

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

[marazm]

Валидацию самой формы тоже будем писать без библиотек? Удачи!

[Temp1ar]

Если требуется валидировать поля на стороне клиента, то элементарно, если слать всю форму AJAXом на сервер, то может и нужна библиотека, но речь идет вообще не о валидации форм, я говорил про изменения атрибута одной кнопки.

[marazm]

Для AJAX тоже нужна библиотека, поскольку есть отличия в реализации.

А если у вас форма сделанная за минуту в дримере, то дисаблить кнопку совершенно не обязательно.

Я подразумеваю комплексность.

[sk2]

наверное лучше onsubmit?

[sanchesfree]

как вариант, но тогда надо знать idшник кнопки например… :)

[sanchesfree]

хотя нет, так правильнее :)

[NULL_byte]

Жестко, жестко… Бывает ли без jQuery… Вы чего, ребят? Это не жестко, это правильно и рацонально.

[mactator]

А что делать, если форму отправили нажав ввод в одном из полей?
Начнется отправка, а событие onClick не отработает.

И, скажем, если мы это поправим, и повесим проверку на formSubmit,
то потеряем функционал «открытие результата выполнения в новом окне»
по нажатию на Shift+Enter:
результат откроется в новом окне, а форма или кнопка отправки заблокируются.
Тоже не совсем то, что ожидается.

Не так всё просто получается :)

Остается вопрос: зачем деактивировать кнопку отправки?
В каких ситуациях это делается, чем оправдано?
В ответах на эти вопросы и кроются дальнейшие решения.

[marazm]

> зачем деактивировать кнопку отправки?
1. Предотвратить повторную отправку
2. Избавиться от уёбищных сообщений после нажатия кнопки а ля "%s не может быть добавлено. Введите имя". В жизни я бы ответил: «Ну а хули дали нажимать?». Помните что вы делаете вещи для идиотов.

> В каких ситуациях это делается, чем оправдано?
Везде кроме чатов :)

>по нажатию на Shift+Enter
Тут стоит задуматься над вопросом «Зачем?». Зачем оставлять страницу с формой открытой. Лично я этим ниразу в жизни не пользовался.

[mactator]

>Зачем оставлять страницу с формой открытой. Лично я этим ниразу в жизни не пользовался.
И оставляете за бортом аудиторию, которая этим пользуется. Конечно проще сказать, что они идиоты :), но всё-таки юзабилити превыше всего, и над решением стоит подумать.

У меня на работе формы поддерживаемого веб движка работают по описаному в топике принципу. Всё было хорошо, пока не понадобилось открывать результат выполнения формы в новом окне или дополнительном фрейме или отдавать весь запрос ajax-запросщику.

[marazm]

Можно КОНКРЕТНЫЙ пример?

P.S> Извиняюсь за капс, просто за сегодня встретил уже двух неадекватных людей, грубо говоря ответивших на такой вопрос «нет» :)

[mactator]

Неадекватных вообще много, но речь не о них.

Конкретный пример:
есть форма, в которую вводятся параметры и кнопка отправки (злополучная)
на основе данных формируется Excel отчет и тут же грузится
выводится диалог на сохранение файла
файл сохраняется, нужно сгенерировать другой отчет
изменив только одно поле, а остальные поля оставить прежними
а форма заблокирована
приходится опять грузить эту форму, вбивать данные

неудобно

ладно регистрация почты, пользователь потерпит
а для людей, которые весь день с такими формами работают
такое поведение может быть неприемлемо

[marazm]

Ну это не совсем подходит под задачу «Предотвратить повторную отправку»

[mactator]

Эта задача неочевидна. В тексте топика есть лишь упоминание об улучшении формы деактивацией кнопки. Какое именно улучшение просходит не ясно.

[mactator]

Вообще мир является лучшей своей моделью
и о применимости нужно судить на конкретных примерах
где-то это хорошо, где-то плохо
но тема хорошая.

Надо глянуть, что в w3c по этому поводу пишут.

[navix]

По-поводу первого, нужно для самой формы отписать: onSubmit='return script();'

[Ag47]

«В идеале, кнопка должна становиться активной только после того, как форма будет полностью валидна.»
Это не дружелюбно, так как вы не пишете объяснений почему форма не может быть отправлена («Поле не заполнено»), а кнопку дезактивируете.
И эти объяснение вылезет только когда пользователь потыкает в поля.

[marazm]

Заметьте, я не говорил «без объяснений» :) Валидатор нах не нужен, если он не может ткнуть носом в косяк.

[Ag47]

Валидатор всё объяснит после того как пользователь потыкается.
А до этого ему никто ничего не скажет, а кнопку дезактивируют.

Можно, конечно, над формой написать сопроводительный текст мол «Заполните все поля»,
но это лишний текст, в том плане что не должно быть служебного текста слишком много.

Кажется, мол а зачем кнопка нужна если форма всё равно не отправится, а затем что
так интерфейс пользователю более понятен, ибо не надо пользователя заставлять лишний раз думать
создавая косвенные связи (сначала заполни правильно, а потом мы тебе кнопку активируем).

[marazm]

Думаю, стоило бы написать, что данный метод отнюдь не является моим изобретением и давно применяется на ресурсах с лучшим юзабилити. Может было бы меньше вопросов :)

[Ag47]

думаю стоило бы упомянуть эти ресурсы)

[marazm]

Я вот только что скачал Google Chrome :) Попробуйте

[mactator]

Да, и на «этих» ресурсах дополнительно пишут пояснение к элементам ввода, мол «Введите адрес электронной почты» или «Введите символы с картинки». Тогда заблокированная кнопка выглядит логично.

[pumi]

А вы пробовали в IE нажимать?

[bomb]

вот дожили, уже атрибуты меняют библиотеками.

[marazm]

Однородность это правильно.

[taliban]

я на Вас посмотрю когда вам надо будет переписывать код без jQuery… есть вещи для которых нужны библиотеке, а есть в которых лучше без них все сделать… или Вам жалко написать лишних пару символов в setAttribute которая стандартизована не в библиотеках а в браузерах

[marazm]

Вы серьёзно думаете, что я использую JS только чтобы дисаблить кнопку? Вообще топ не про jQuery и пример лишь пример.

[dimants]

а я вот пользуюсь оперой, и при использовании в опере кнопок «назад» и «вперед» страница не перегружается и состояние этой кнопки остается disabled. Что очень сильно напрягает, когда например пользуешься какой-нибудь формой запроса.

[1allen]

а я пользуюсь оперой и wevdevmenu, там есть замечательная вещь Forms-> Undisable all form elements…

[Bonch]

Боже мой, разве стоит вообще создавать «столь полезные посты»?
Тем более, что они учат, как НЕ надо делать. Дизейблить кнопку отправки нужно по событию onsubmit формы. Если же произошли ошибки валидации — расдизейбливаем кнопку.

А если форма отправляется по AJAX, тогда смотрим, не произошло ли ошибок при передаче данных. Если произошли — тогда btn.disabled = false.

Ко всему написанному, соглашусь с первым комментарием. Так тоже не помешает делать.

[nutz]

блин, ребят, о чем вы вообще говорите?
подскажите плагин к жиКвери, который подшил бы мне джинсы… ато скобки от степлера слабые…

[denver]

В идеале, кнопка должна становиться активной только после того, как форма будет полностью валидна.

Натыкался на такие. Вся эта их утописечкая идеология рушилась когда:
— JS программер слажал и яваскрипт выдал ошибку и не сработал, форму отправить нельзя
— Форм заполнилась, отослалась, пришла обратно с ошибкой «капча неверная», все поля заполнены, но нужно каждое прокликать (тут тоже «умный» проггер поработал)
— Форма была заполнена third-party автозаполняльщиком, так что никакое поле не только клика, даже фокуса не получало.

В идеальном идеале, яваскрипт какбэ должен перехватывать и улучшать (когда может), а НЕ являться обязательным звеном цепочки.

[marazm]

Да, это всё верно. И сама идея верна — лучше сделать хорошо что-то маленькое, чем сделать коряво что-то большое, тем более если основная суть не меняется.

[taliban]

вы забыли добавить что серверный программер что-то накосячил и вообще ексепшены полезли а потом еще админ накосячил и сервер упал… вообще имеется ввиду что нормальная форма должна учитывать валидацию и затем давать пользователю волю на сабмит, и это не значит что пользователь обязан вводить все ручками и только после этого открывать кнопки

[ocnk]

дисаблить ОТПРАВКУ ДАННЫХ нужно при использовании асинхронного аджакса, дабы не слать по 5 раз одно и тоже. А как дисаблить это уже решаете сами…

[hazy]

Выключение сабмита на одну секунду на prototype.js

$('submit').disable(); (function(target){$('submit').enable()}).delay(1, this)

[LDEV]

Кстати, стоит учесть, что если кнопка задисаблится до отправки данных (по клику), то имя этой кнопки и её значение не будут переданы в GET/POST. Во многих скриптах проверка на приход формы именно по имени кнопки сабмита.

[Xenviper]

Спасибо за вашу статью. Она помогла мне интегрировать даективацию/активацию элементов формы в мой модуль для Drupal'a.