) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .
Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет - на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
Зачем нужно делать кнопки неактивнымиПонятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class="form_is_loading" , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?
Как делать кнопки неактивными Этот предложенный в вышеупомянутых топиках простой вариант оказывается недостаточным и неработоспособным.Почему недостаточно просто делать нажатую кнопку неактивной:
Вкратце сценарий таков.
//// 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 и отправляют письмо без перезагрузки страницы в независимости заполнены ли поля. То есть если человек начнет просто нажимать на кнопку, то пойдут пустые письма, а так кнопка блокируется и не дает этого сделать.
На этом все, спасибо за внимание. 🙂
Итак сегодня мне понадобилось сделать одну фичу в своём новом прожекте. Проект достаточно обширный, чтобы объянять что и как и поэтому я расскажу о самой сути этой “фичи”.
Задача состояла в том, чтобы админ мог удалять пользователей из базы. Итак задаём параметры поиска и php скрипт выдаёт нам список пользователей. Напротив каждого пользователя стоит квадратик чекбокс (checkbox) переключатель, дабы можно было выделить и удалить.
Но не всё так просто. Задача состояла в том, чтобы кнопка “удалить” была неактивной, а активной становилась лишь в тот момент, когда выбран хоть один флажёк. Естественно монстры JavaScript скажут, да тут два пальца обасс “об асфальт”. Но я не монстр JS, и прибегаю к программированию на сием языке только когда захочется чего-нибудь эдакого, для удобства.
Итак, как порядочный я полез в сеть, и Яндекс и Гугл и всякие там порталы напихали мне в браузер очень много разного кода из которого мой мозг всё-таки слепил именно то, что мне требовалось. Как оказалось, нормальных (работающих) примеров в сети толком то и нет и поэтому, чтобы другой подобный мне не взрывал свой мозг, я решил выложить рабочий пример JavaScript кода.
HTML же реализацию думаю понять не сложно, но всё-таки я и её добавлю:
1 - One2 - Two
3 - Three
… 10 - Ten
Итак в чём же основная проблема с которой столкнулся я. Оказывается “выключить” кнопку можно как угодно, т.е. обратившись к элементу submit в любой доступной форме:
Submit.disabled = true;
Однако включить (заменим на false) подобным способом не получается и именно поэтому я накопал аж вот такую конструкцию:
Document.form_del.elements["submit"].disabled = true;
И вот здесь, если мы заменям true на false, то кнопка как включается, так и выключается. Ну и напоследок расшифрую я эту строчку кода:
В теущем документе в форме по имени “form_del” в элементе у которого имя “submit” (а у нас в примере это имя носит кнопка) есть свойсто “disabled”, так вот мы включаем его “true” или выключаем “false”. Т.о. включив данное свойство мы сделаем нашу кнопку неактивной, а выключив свойство, наша кнопка снова станет активной.