Как сделать чтобы форма не отправлялась js
у меня есть кнопка ( ). При нажатии на нее страница перезагружается. Так как у меня есть некоторые jQuery hide() функции, которые вызываются при загрузке страницы, это приводит к тому, что эти элементы будут снова скрыты. Как заставить кнопку ничего не делать, поэтому я все еще могу добавить какое-то действие, которое происходит при нажатии кнопки, но не перезагружает страницу.
использовать элемент или использовать .
в HTML:
во избежание обновления на всех "кнопках", даже с назначенным onclick.
вы можете добавить обработчик щелчка на кнопку с помощью jQuery и вернуть false.
или
в HTML:
С jQuery, какой-то подобный вариант, уже упоминался.
Я пока не могу комментировать, поэтому я публикую это в качестве ответа. Лучший способ избежать перезагрузки - это то, как @user2868288 сказал: используя onsubmit на form тег.
из всех других возможностей, упомянутых здесь, это единственный способ, который позволяет запускать новую проверку ввода данных браузера HTML5 ( не будет этого делать ни обработчики jQuery/JS) и позволяет добавлять динамическую информацию jQuery/AJAX на странице. Например:
При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.
Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.
Давайте посмотрим на них подробнее.
Событие: submit
- Первый – нажать кнопку или .
- Второй – нажать Enter , находясь на каком-нибудь поле.
Оба действия сгенерируют событие submit на форме. Обработчик может проверить данные, и если есть ошибки, показать их и вызвать event.preventDefault() , тогда форма не будет отправлена на сервер.
- Перейдите в текстовое поле и нажмите Enter .
- Нажмите .
Оба действия показывают alert и форма не отправится благодаря return false :
При отправке формы по нажатию Enter в текстовом поле, генерируется событие click на кнопке .
Это довольно забавно, учитывая что никакого клика не было.
Метод: submit
При этом событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit() , то он уже выполнил всю соответствующую обработку.
Иногда это используют для генерации формы и отправки её вручную, например так:
Задачи
Модальное диалоговое окно с формой
В обоих случаях нужно завершить процесс ввода и закрыть диалоговое окно с формой.
В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого 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.
Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!
В сети интернет практически каждый сайт имеет html формы, которые предположительно заполняет пользователь, затем отправляет на сервер. Формы могут исполнять роль различных анкет, форм регистраций, подписки и т.д. Каждая такая форма может иметь свои правила заполнения, а так же логику проверки введенных данных пользователем. Некоторые поля формы являются обязательными, а другие нет, иными словами, может возникнуть ситуация когда параметры отправляются на сервер пустыми. В случае если форма массивная, с большим количеством вариаций полей и значений, то строка запроса при этом будет соответственно больших размеров. Особенно это заметно когда форма отправляется GET – запросом. Иногда нужно сделать так, чтобы параметры с пустыми значениями на сервер не отправлялись. В данной статье мы рассмотрим пример решения этой задачи с помощью JQuery фреймворка.
Далее прописываем обработчик формы, который запускается при отправке формы. Он находит нужные поля по id, затем проверяет значение поля на пустоту. В примере проверка происходит только одного поля – phoneNum. Если поле пустое, то параметр деактивируется, и не отправляется на сервер соответственно.
Как можно заметить, ничего сложного. Форма сделана для наглядного примера, по этой причине она имеет примитивный вид, в ваших проектах масштабы формы могут быть значительные, с использованием чекбоксов, множественных списков и других полей.
Так как каждая форма индивидуальна по своему, с большой вероятностью вам будет необходимо дописывать условие для своих полей.
У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).
Блокирование
Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. К тому же такие поля не отправляются на сервер.
Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.
На рис. 1 представлены разные элементы форм в заблокированном состоянии.
Рис. 1. Вид заблокированных элементов в Chrome
Для блокирования элемента формы используется атрибут disabled . Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его.
Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 1 показано применение скриптов для изменения блокировки кнопки.
Пример 1. Блокирования поля
HTML5 IE Cr Op Sa Fx
Результат данного примера в Safari показан ниже (рис. 2).
Рис. 2. Заблокированное текстовое поле
Поле только для чтения
Поля формы можно не только блокировать, но и переводить их в режим только для чтения. В этом случае доступ к ним сохраняется, но изменять значения заданные по умолчанию нельзя. Разумеется, речь идёт только о полях, где требуется вводить текст. Выделять и копировать текст можно, но изменить не получится.
Читайте также: