Как сделать чтобы форма не отправлялась js

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

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

использовать элемент или использовать .

в HTML:

во избежание обновления на всех "кнопках", даже с назначенным onclick.

вы можете добавить обработчик щелчка на кнопку с помощью jQuery и вернуть false.

или

в HTML:

С jQuery, какой-то подобный вариант, уже упоминался.

Я пока не могу комментировать, поэтому я публикую это в качестве ответа. Лучший способ избежать перезагрузки - это то, как @user2868288 сказал: используя onsubmit на form тег.

из всех других возможностей, упомянутых здесь, это единственный способ, который позволяет запускать новую проверку ввода данных браузера HTML5 ( не будет этого делать ни обработчики jQuery/JS) и позволяет добавлять динамическую информацию jQuery/AJAX на странице. Например:

При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.

Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.

Давайте посмотрим на них подробнее.

Событие: submit

  1. Первый – нажать кнопку или .
  2. Второй – нажать Enter , находясь на каком-нибудь поле.

Оба действия сгенерируют событие submit на форме. Обработчик может проверить данные, и если есть ошибки, показать их и вызвать event.preventDefault() , тогда форма не будет отправлена на сервер.

  1. Перейдите в текстовое поле и нажмите Enter .
  2. Нажмите .

Оба действия показывают 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. Заблокированное текстовое поле

Поле только для чтения

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

Читайте также: