Сайт о телевидении

) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .

Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет - на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.

Зачем нужно делать кнопки неактивными

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

Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки

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

Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class="form_is_loading" , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?

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

Почему недостаточно просто делать нажатую кнопку неактивной:

Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.

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

Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение - даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

Вкратце сценарий таков.

Кнопки делаем неактивными по событию onsubmit формы

Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload

Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу

А далее следует более развернутый сценарий с макетом кода.

//// html файл ////////////////////////////////////////////////////////////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js файл //////////////////////////////////////////////////////////////////////// formUploader = { prepareForm: function(form){ // Каждая значимая кнопка формы при клике должна создать одноименное hidden поле, // чтобы на сервер передалась информация о том, какая кнопка была кликнута var allFormFields = form.getElementsByTagName("input"); for (var i=0; i=7

То есть мы задаем параметр разрешить отправку, если в поле больше равно 7 символов. То есть кнопка не активируется пока в поле, где указанный данный параметр не будет 7 или больше символов. Давайте зададим следующие параметры. Для имени 2 знака, для почты - 5 и номер 7. Готовая 6 строка скрипта выглядит так:

If(name.length >=2 && email.length >=5 && phone.length >=7) {

Для тех кого интересует вопрос - А как указать максимальное количество символов? . Ответ: в HTML коде, в поле input пропишите атрибут

Maxlength="15"

который устанавливает ограничение в 15 символов. Просто укажите свое число.

В 7 и 9 строке указан ID нашей будущей кнопки - "ОТПРАВИТЬ" из формы, которая в случаи выполнения условий будет разблокирована. В данном случаи это - #submit .

HTML код

Теперь вставим простую форму с тремя полями. Наша форма будет отправлять имя, почту и телефон. Вы же можете использовать свою форму.

Чтобы все сработало, во-первых - к нужным полям нужно добавить событие -

Onkeyup="checkParams()"

которое запускает работу нашего скрипта.

Во-вторых, к кнопке добавить атрибут disabled, который будет отменятся скриптом, в случаи заполнения нужных полей.

В-третьих у полей input должен быть ID, который так же указывается и в скрипте, как я и говорил выше.

Вот и весь способ. Он не сложный, хоть статья получилась и не маленькая. Если внимательно все читать и разобраться, то у Вас не должно возникнуть сложностей.

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

На этом все, спасибо за внимание. 🙂

) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .

Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет - на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.

Зачем нужно делать кнопки неактивными

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

Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки

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

Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class="form_is_loading" , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?

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

Почему недостаточно просто делать нажатую кнопку неактивной:

Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.

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

Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение - даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

Вкратце сценарий таков.

Кнопки делаем неактивными по событию onsubmit формы

Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload

Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу

А далее следует более развернутый сценарий с макетом кода.

//// html файл ////////////////////////////////////////////////////////////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js файл //////////////////////////////////////////////////////////////////////// formUploader = { prepareForm: function(form){ // Каждая значимая кнопка формы при клике должна создать одноименное hidden поле, // чтобы на сервер передалась информация о том, какая кнопка была кликнута var allFormFields = form.getElementsByTagName("input"); for (var i=0; i