Как сделать форму неактивной c
Обновлено: 07.07.2024
Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако всегда есть поля обязательные для заполнения. Как же проверить, заполнил пользователь нужное поле или нет. Есть два пути:
- Проверка в обработчике, т.е. пользователь заполняет нужные поля, отправляет форму, а дальше обработчик проверяет обязательные поля, и если какое либо поле не заполнено – возвращает пользователя обратно. Все просто, однако необходим механизм для передачи значений уже заполненных полей обратно в форму, который можно реализовать с помощью сессий, однако это не очень удобно.
- Проверка методами JavaScript – все гораздо проще (в плане работы самой формы). Задаем каждому полю событие onchange или любое другое реагирующее на действие пользователя (ну не onmouseover конечно, хотя наверное можно сделать даже забавно…), после которого написанная нами функция будет проверять, заполнены ли обязательные поля и разрешать или запрещать кнопку submit.
Первый вариант относится больше к разделу PHP, поэтому пока рассматриваться не будет. Рассмотрим более подробно второй. Первое что нам необходимо – сама форма:
Как видите, у кнопки Submit имеется атрибут disabled в значении disabled. Также у каждого поля формы есть событие onchange, при котором вызывается функция EnableButton(). Что же из себя представляет данная функция? Допустим, полями, обязательными для заполнения, являются field1 и field3, тогда функция EnableButton() будет выглядеть так:
К сожалению, я не нашел в JavaScript аналога PHP функции empty(), поэтому значения полей приходится сравнивать с пустой строкой. Еще на что стоит обратить внимание – оператор with (document.forms.form1). Для тех кто не знаком с JavaScript – выражение в скобках оператора with будет добавляться ко всем объектам, что позволяет значительно сократить запись функции. Без with EnableButton() выглядела бы следующим образом:
Согласитесь – довольно громоздко.
В продолжении стоить отметить, что атрибут disabled можно использовать для любого элемента формы. Пример – заполнение информации о фирме – юридический и почтовый адрес. Два поля для двух адресов, однако можно добавить флажок checkbox (- совпадает с юридическим), отметив который, пользователь укажет что поле почтовый адрес обрабатывать не надо и можно добавить ему атрибут disabled.
) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .
Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет - на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
Зачем нужно делать кнопки неактивными
- Чтобы пользователю стало очевидным, что он уже нажал на кнопку, и что форма отправляется
- Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки
Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?
Как делать кнопки неактивными
Этот предложенный в вышеупомянутых топиках простой вариант оказывается недостаточным и неработоспособным.
Почему недостаточно просто делать нажатую кнопку неактивной:
Вкратце сценарий таков.
- Кнопки делаем неактивными по событию onsubmit формы
- Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload
- Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу
Темой сегодняшней статьи будет форма заполнения, а именно ее, небольшая валидация. Если сказать точнее, это не совсем валидация, потому как проверка на правильность ввода производится не будет. Данный способ, делает неактивной кнопку отправки, пока нужные поля в форме не будут заполнены.
Блокировка кнопки отправки, пока поля не заполнены, достигается с помощью jQuery . Поможет нам небольшой скрипт, который и будет осуществлять задуманное. Давайте сделаем такую форму с неактивной кнопкой.
Подключение библиотеки jQuery
Первым шагом будет подключение в шапку перед закрывающимся head или в подвал перед закрывающимсяbody библиотеки jQuery .
Тут нужно быть очень внимательным, иногда библиотека уже подключалась ранее и повторное ее подключение приведет к конфликту и неработоспособности скрипта. Так что, в случаи не работы, попробуйте не подключать данную библиотеку или изменить место подключения.
Скрипт блокировки кнопки отправки
В строках 2,3,4 задаем наши поля, а именно их ID в будущей форме и присваиваем им имена для работы скрипта. Как говорил их три, так что по нужде можно лишние убрать или добавить нужные.
В 6 строке задаются параметры по количеству символов в полях. В данном коде указан параметр != 0 , то есть, если в поле ничего нет оно не разблокирует кнопку, если вбить хоть один символ, это поле считается заполненным. И как видно у нас указано три поля и каждое имеет одинаковый параметр.
Если Вам нужно задать другое минимальное количество символов, то нужно немного изменить код. Если Вы просто замените "0" на нужную цифру, то это ничего не даст. Чтобы все работало нужно заменить:
То есть мы задаем параметр разрешить отправку, если в поле больше равно 7 символов. То есть кнопка не активируется пока в поле, где указанный данный параметр не будет 7 или больше символов. Давайте зададим следующие параметры. Для имени 2 знака, для почты - 5 и номер 7. Готовая 6 строка скрипта выглядит так:
If(name.length >=2 && email.length >=5 && phone.length >=7)
Для тех кого интересует вопрос - А как указать максимальное количество символов? . Ответ: в HTML коде, в поле input пропишите атрибут
который устанавливает ограничение в 15 символов. Просто укажите свое число.
HTML код
Теперь вставим простую форму с тремя полями. Наша форма будет отправлять имя, почту и телефон. Вы же можете использовать свою форму.
Чтобы все сработало, во-первых - к нужным полям нужно добавить событие -
которое запускает работу нашего скрипта.
Во-вторых, к кнопке добавить атрибут disabled, который будет отменятся скриптом, в случаи заполнения нужных полей.
В-третьих у полей input должен быть ID, который так же указывается и в скрипте, как я и говорил выше.
Вот и весь способ. Он не сложный, хоть статья получилась и не маленькая. Если внимательно все читать и разобраться, то у Вас не должно возникнуть сложностей.
Данный метод помог мне при создании форм, которые используют ajax и отправляют письмо без перезагрузки страницы в независимости заполнены ли поля. То есть если человек начнет просто нажимать на кнопку, то пойдут пустые письма, а так кнопка блокируется и не дает этого сделать.
На этом все, спасибо за внимание. 🙂
Итак сегодня мне понадобилось сделать одну фичу в своём новом прожекте. Проект достаточно обширный, чтобы объянять что и как и поэтому я расскажу о самой сути этой “фичи”.
Задача состояла в том, чтобы админ мог удалять пользователей из базы. Итак задаём параметры поиска и php скрипт выдаёт нам список пользователей. Напротив каждого пользователя стоит квадратик чекбокс (checkbox) переключатель, дабы можно было выделить и удалить.
Но не всё так просто. Задача состояла в том, чтобы кнопка “удалить” была неактивной, а активной становилась лишь в тот момент, когда выбран хоть один флажёк. Естественно монстры JavaScript скажут, да тут два пальца обасс “об асфальт”. Но я не монстр JS, и прибегаю к программированию на сием языке только когда захочется чего-нибудь эдакого, для удобства.
Итак, как порядочный я полез в сеть, и Яндекс и Гугл и всякие там порталы напихали мне в браузер очень много разного кода из которого мой мозг всё-таки слепил именно то, что мне требовалось. Как оказалось, нормальных (работающих) примеров в сети толком то и нет и поэтому, чтобы другой подобный мне не взрывал свой мозг, я решил выложить рабочий пример JavaScript кода.
В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.
JavaScript – один из самых популярных языков программирования, применяемых в веб-разработке. Он используется на большинстве сайтов, и все современные браузеры поддерживают его по умолчанию. В этом руководстве мы рассмотрим полезные приемы, которые помогут вам освоить разработку на JavaScript.
В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.
Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.
Включение и отключение кнопки на чистом JavaScript
В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:
Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled .
После загрузки формы в коде предусмотрено событие onchange , связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton .
Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false , что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true , и как следствие этого, кнопка остается неактивной.
В приведенном выше примере для создания кнопки используется элемент , но при желании также можно использовать HTML-кнопку , как показано ниже:
Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.
Активация и отключение кнопок на jQuery
Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:
Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr .
Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.
Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop , как показано во фрагменте кода, приведенном ниже:
Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr . Результат будет таким же, что и при использовании параметра false для свойства disabled :
Заключение
В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.
Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!
В чём же причина такого поведения? Об этом расскажу дальше. Рассмотрим открытие и закрытие форм на примерах.
Открываем и закрываем форму из другой формы
У нас в приложении есть две формы Form1 — главная, которая открывается сразу при запуске приложения и Form2, которую открываем по нажатию на кнопку.
Чтобы открыть Form2 нам необходим следующий код, который будет срабатывать при нажатии на кнопку:
Теперь у нас открылась Form2 и спряталась Form1. Поработав с Form2 мы её закрываем и при этом нам надо после этого отобразить Form1. Многие начинающие, включая меня начинают писать следующий код, который помещаем в событие, которое происходит после закрытия Form2:
Это работает, однако правильно ли это? Решать вам.
Первая часть кода: мы отображаем Form2 и скрываем Form1. Не закрываем, а именно скрываем, т.е. экземпляр Form1 продолжает существовать.
Закрыть Form1 вместо скрытия не получится, так как это главная форма приложения и при её закрытии мы закроем всё приложение.
Сейчас мы с вами рассмотрим правильный код, который не будет создавать второй экземпляр Form1 и отображать его, а будет отображать скрытую до этого Form1.
OpenForms — получает коллекцию открытых форм приложения. В нашем случае мы сразу обратились к главной форме приложения (OpenForms[0]).
Теперь при закрытии Form2 у нас будет вызываться и отображаться та форма, которая породила закрывающуюся.
Учитываем координаты форм при открытии
Form ifrm = new Form2();
ifrm.ShowDialog();
Это правильное решение, которое всегда будет открывать Form2 поверх Form1 и всегда по центру Form1. Однако этот код не применим, если вам надо скрывать Form1, так как Form1 не будет скрываться.
Сейчас приведу полное решение, которое позволит открывать Form1 и Form2 в той же точке, где находилась до этого форма, вызывающая другую форму. Код включает всё вышеописанное. В свойствах форм надо прописать следующее (прямо в студии выбираете эти значения):
Теперь вы не создаёте второго экземпляра Form1 и приложение всегда будет закрываться, не оставаясь в памяти.
Открываем форму поверх другой формы, как модальное окно
Чтобы открыть Form2 поверх Form1, как модальное окно, не скрывая Form1, вам хватит этого кода:
В итоге Form2 будет открыта поверх Form1. В этом случае пользователь не сможет переключиться на Form1 не закрыв Form2.
Всем привет. Речь конечно же пойдет о кнопке на странице сайта или какого-то веб-приложения. Мы будем делать ее неактивной через JS, но для этого нам нужно создать условие, то есть в каких случаях кнопка будет неактивной, потому что оставлять ее в этом положении навсегда не имеет смысла. В большинстве случаев это делается при проверке каких-то данных в форме и там как раз есть условие — если проверка на заданные условия пройдена, то кнопку сделаем активной, если нет — нажатие на кнопку будет запрещено. Я уже писал про валидацию номера телефона на JS, поэтому мы можем частично воспользоваться кодом, который приведен в статье. неактивная кнопка а HTML выглядит так:
То есть кнопке просто добавляется атрибут disabled и дальше будет зависеть от контекста. В каких случаях атрибуту присваивать значение TRUE, а в каких FALSE. Теперь можно перейти к конкретным примерам.
Соответственно сделать кнопку неактивной на JS можно и для других данных, когда форма содержит гораздо больше полей и все их нужно проверить. В этом уроке я привел основной принцип, а реализация и проверки будут зависеть от конкретной задачи.
Читайте также: