Получить значение из формы на jQuery
Сегодня мы научимся получать значения из формы на jQuery, вводимые пользователем. Рассмотрим на примере простого калькулятора. У него будет два текстовых поля для ввода чисел, поле Submit для запуска функции сложения и параграф для вывода результата.
1) Как всегда, начнем с HTML разметки.
Все поля формы снабжены идентификаторами, которые привязаны к меткам. Чтобы изобразить кнопку, необязательно использовать тег button. Поле input type=»submit» работает аналогичным образом.
2) Подключим библиотеку jQuery.
3) Напишем скрипт калькулятора на jQuery
Обернем скрипт в анонимную функцию, отслеживающую готовность документа для работы. Когда все HTML теги построятся, то скрипт начнет выполняться.
Отловим событие отправки формы (клик по кнопке). Для этого укажем id формы и событие «submit».
$(‘#summa’).on(‘submit’, function(event) <
event.preventDefault();
>);
Внутри функции, обращаемся к event и далее через точку указываем его метод preventDefault(), который отменяет стандартное поведение формы в браузере. Часто можно увидеть, что вместо event, пишут сокращенно букву (e).
Получим значения полей, вычислим их сумму и ниже выведем результат суммы. Запишем в переменные идентификаторы полей для ввода чисел. Метод val() вернет значения полей, которые введет пользователь.
По умолчанию, все вводимые числа пользователями, являются строками. А это значит, что произойдет не математическое действие сложения, а объединение строк. Метод parseInt преобразует содержимое переменных в целые числа.
numberOne = parseInt(numberOne);
numberTwo = parseInt(numberTwo);
Теперь запишем сложение двух переменных в переменную summa.
summa = numberOne + numberTwo;
Выведем результат суммы в теге span с id=»summaResult» с помощью метода text(), передав в параметре результат сложения.
Однако, если не все поля будут заполнены, то сумма не посчитается и выведется NaN. Чтобы такого не произошло, проверим, все ли поля заполнены. Создадим условие, если первое поле оказалось без числа (isNAN), то передадим ему значение 0. Такую же проверку сделаем и для второго поля.
if (isNaN(numberOne)) <
numberOne = 0;
>;
if (isNaN(numberTwo)) <
numberTwo = 0;
>;
Смотрите пример на CodePen
Самой используемой библиотекой на реальных проектах, по прежнему остается jQuery. Данный видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру» поможет вам в короткие сроки, приобрести навыки работы с востребованными на рынке технологиями.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Ajax на практике.
Получение данных из формы.
Серия статей «Ajax на практике«
В прошлой статье, мы разобрали основной механизм работы метода jQuery $.ajax(). Теперь не плохо бы рассмотреть случаи из реальной практики: каким способом и откуда можно получать данные для передачи ajax-запросом.
Получение данных из формы.
Есть несколько способов получить данные из полей формы:
Остановимся на двух последних и не столько на том, как получать данные (тут всё просто), а на том, как их обрабатывать на стороне сервера. Возьмем, к примеру, такую форму:
HTML (файл index.html)
И напишем такой JS-код
jQuery (файл script.js)
Теперь напишем обработчик таким образом, чтоб наглядно увидеть разницу между методами serialize() и serializeArray()
PHP-обработчик (файл handler.php)
Итак, если мы отправим данные с использованием метода serialize(), то после завершения запроса, вместо формы, мы увидит примерно такую картину:
Проделаем то же самое, но уже с использованием метода serializeArray(), только слегка изменим обработчик. Теперь он должен выглядеть таким образом:
В этом случае, мы уже увидим на экране следующее:
Получение данных из атрибута data-*.
И напишем следующий JS-код:
Таким не сложным способом, без лишних «телодвижений», мы получили о товаре данные, которые можем использовать дальше: передать AJAX-запросом на сервер, записать в cookie или Local Storage и т.д. Конечно же мы не сбрасываем со счетов и обычные методы для получения данных: текстовое содержание элементов, их другие атрибуты и прочее, но с этим, я надеюсь, что сложностей возникнуть не должно 
В следующей части, коснёмся одной из наиболее животрепещущей темы среди новичков: загрузка файлов с помощью AJAX.
Как я могу получить данные формы с помощью JavaScript / jQuery?
есть ли простой, однострочный способ получить данные формы, как это было бы, если бы он должен был быть представлен в классическом HTML-только способом?
что-то вроде этого слишком просто, так как оно (правильно) не включает текстовые области, выбирает, переключатели и флажки:
25 ответов
на основе jQuery.serializeArray возвращает пары ключ-значение.
обновленный ответ на 2014 год: HTML5 FormData это
это придирчивый ответ, но позвольте мне объяснить, почему это лучшее решение:
мы правильно обрабатываем форму отправки, а не нажатие кнопки. Некоторые люди любят нажимать enter на полях. Некоторые люди используют альтернативные устройства ввода, такие как речевой ввод или другие специальные устройства. Обработайте форму submit, и вы правильно ее решите для всех.
мы копаемся в данных формы для фактической формы, которая была представлен. Если вы измените селектор формы позже, вам не нужно будет менять селекторы для всех полей. Кроме того, у вас может быть несколько форм с одинаковыми именами ввода. Не нужно путать с чрезмерными идентификаторами, а что нет, просто отслеживать входные данные на основе формы, которая была отправлена. Это также позволяет использовать один обработчик событий для нескольких форм если что подходит для вашей ситуации.
интерфейс FormData довольно новый, но хорошо поддерживается браузерами. Это отличный способ построить сбор данных, чтобы получить реальные значения того, что находится в форме. Без него вам придется перебирать все элементы (например, с form.elements ) и выяснить, что проверено, что нет, какие значения и т. д. Полностью возможно, если вам нужна старая поддержка браузера, но интерфейс FormData проще.
Я использую ES6 здесь. ни в коем случае не требование, поэтому измените его обратно на ES5 совместимость, Если вам нужна поддержка старого браузера.
Как я могу получить данные формы с помощью JavaScript / jQuery?
Существует ли простой однострочный способ получения данных формы, как это было бы, если бы они были представлены классическим способом только для HTML?
Нечто подобное слишком простое, поскольку оно не включает (правильно) текстовые области, селекторы, переключатели и флажки:
Обновленный ответ за 2014 год: HTML5 FormData делает это
На основании jQuery.serializeArray возвращает пары ключ-значение.
Это глупый ответ, но позвольте мне объяснить, почему это лучшее решение:
Мы правильно обрабатываем отправку формы, а не нажатие кнопки. Некоторые люди любят нажимать ввод на полях. Некоторые люди используют альтернативные устройства ввода, такие как речевой ввод или другие устройства доступа. Обработка формы отправки и вы правильно решите ее для всех.
Мы копаем данные формы для фактической формы, которая была отправлена. Если вы измените селектор формы позже, вам не нужно менять селекторы для всех полей. Кроме того, у вас может быть несколько форм с одинаковыми именами ввода. Не нужно устранять неоднозначность с избыточными идентификаторами, а что нет, просто отслеживайте входные данные на основе формы, которая была отправлена. Это также позволяет вам использовать один обработчик событий для нескольких форм, если это подходит для вашей ситуации.
Интерфейс FormData довольно новый, но хорошо поддерживается браузерами. Это отличный способ создать этот сбор данных, чтобы получить реальные значения формы. Без этого вам придется пройтись по всем элементам (например, с помощью form.elements ) и выяснить, что проверено, а что нет, какие значения и т. Д. Вполне возможно, если вам нужна поддержка старого браузера, но FormData Интерфейс проще.
jQuery плагин для получения данных формы + ajax аплоадер файлов
Доброго времени суток, уважаемое Хабросообщество! Не пытаясь скрыть легкое волнение, публикую свой первый пост, темой которого стал мой скромный jQuery-велосипед для быстрого и безболезненного сбора данных, введенных пользователем на странице (сразу небольшая оговорка для тех, кто закричит — «ату его! Зачем еще один подобный плагин?», отвечу: во-первых — а быть может именно это кто-то из хаброчитателей и искал, во-вторых — для саморазвития, в-третьх: для собственного удобства и безболезненного использования в своих програмных продуктах).
Итак, помимо, собственно моего небольшого плагина, нам понадобится сам jQuery последней версии, а так же небольшой плагин к нему, реализующий преобразование объектов\массивов в json-строку, для того, чтобы полученные данные можно было быстренько передавать на сервер.
updated
updated 2 — добавлена мультизагрузка!
А теперь приступим к описанию методов плагина. Их немного 
Точнее — три.
Ну и последнее: для того, чтобы указать имя формы для элементов input, select и textarea я использовал аттрибут class. Изначально попробовал ввести свой аттрибут form, но это оказалось не кроссбраузерно)
Код плагина в конце статьи
Итак, обновил скрипт и демо. Теперь плагин поддерживает ajax-upload файлов с прогрессбаром. Flash для загрузчика не требуется. Для отображения прогрессбара используется jQueryUI.
Для того, чтобы использовать input:file с нашим плагином, добавляем на страницу элемент, подобный этому:
Далее, на событие document.ready вешаем функцию, преобразующую этот инпут в наш ajax-загрузчик:
$.form.makeUpload(‘.upload[name=test]’, <
upload:’upload.php?action=uploadFile’,
progress:’upload.php?action=progress’,
directory:’uploads’,
multi:true,
autoUpload:true
>);
Вот что получается в итоге: 
Получать данные с таким элементов можно все той же функцией $.form.get
Ну. пока вроде все. Спасибо всем за внимание )
Спасибо всем за карму! Перес в jquery.
Внимание тем кто уже загружал плагин! jquery.form.js и upload.php изменены. Добавлена мультизагрузка и исправлен один баг!
Плагин уже используется в личном кабинете компании СМС услуги, работает там ишачком на нужды клиентов, заливающих excel-файлы с базами абонентов для последующих смс рассылок. =) В числе клиентов куча офисных работников с IE самых разных видов, ни у кого проблем при аплоаде не возникает. Пользуйтесь
Так как хостинг, держащий эти файлы пропал, выкладываю код плагина здесь, демка пропала без вести ) Не забудьте подключить jQuery и jQuery UI!