голосование
PHP
BASH
Javascript
HTML
Firebird
Майнинг
Программы
Хостинг
Железо
Ресурсы
GIT
SEO
Oracle
Python
PostgreSQL
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Автоматический сбор данных из полей input для формы jquery

Очень часто нужно собрать все значения из полей input и отправить PHP-обработчику. Можно использовать много раз функцию val(). Если количество полей будет больше 20, то вам придётся 20 раз использовать val(). Это неудобно! На помощь придёт функция serialize(). Она сама сформирует часть строки с параметрами. Вам нужно будет указать обработчик и пристыковать передаваемые параметры.


<style>
  form { margin:10px; border: 1px solid gray; }
  input { margin:5px; border: 1px solid gray; }
</style>  
<form name="test" method="get" action="api.php">
	<input type="text" name="title" value="" placeholder="Введите название"><br>
	<input type="text" name="text" value="" placeholder="Введите текст"><br>
	<input type="text" name="cat" value="" placeholder="Введите категорию"><br>
	<input type="submit" name="send" value="Отправить">
	<input type="reset" value="Очистить">
</form>

var values = $("form").serialize();
console.log(values);
// вывод: "title=title&text=other+text&cat=category"
url = 'api/index.php?' + values;

Есть один недостаток. Вы не сможете что-то изменить в строке "title=title&text=other+text&cat=category". Изменить данные можно, но это придется использовать: регулярные выражения, функцию replace. Это неудобно. Я предлагаю вам функцию serializeArray(). serializeArray() собирает все данные в массив, а не в строку. Данные в массив попадают в виде объектов.


var values = $("form").serializeArray();
console.log(values);
/* вывод
[Object { name="title", value="title"}, 
 Object { name="text", value="other text"}, 
 Object { name="cat", value="category"}]*/

После применения функции в переменной values находится массив объектов. Обратите внимание на то, что ключом в каждом объекте является свойство name. Если у элементов input не будет атрибута name, то функция serializeArray() не сработает. Теперь у вас есть возможность обратиться к элементу массива и изменить его свойство. Есть еще одна крутая функция serializeObject(). Я взял её из интернета.


$.fn.serializeObject = function()
{
 var o = {};
 var a = this.serializeArray();
 $.each(a, function() {
     if (o[this.name] !== undefined) {
         if (!o[this.name].push) {
             o[this.name] = [o[this.name]];
         }
         o[this.name].push(this.value || '');
     } else {
         o[this.name] = this.value || '';
     }
 });
 return o;
};

var values = $("form").serializeObject();
console.log(values);
// вывод: Object { title="title", text="other text", cat="category"}

Обратите внимание что создаётся объект с ключами и значениями. Это очень удобно. Вы можете изменить любое значение налету values.cat = 'javascript'. В предыдущей функции serializeArray() для того чтобы изменить значения у элемента массива нужно было бы обращаться к элементу массива по ключу (индексу) v[0].name = 'javacript';. Это неудобно. В данном примере изменить значение объекта очень просто и удобно values.cat = 'jquery'. Следите за тем чтобы у input свойства name не повторялись.

Вы можете выбирать значение из каждого поля по селектору или id. Смотрите статью как получить поменять значение элемента val() jquery.

просмотры: 1882, уровень: лёгкий уровень, рейтинг: 0, дата: 2015-12-26 10:30:35
проголосовать:

Комментарии:






поиск
банеры
сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP
http://ping-admin.ru/index_5659.html мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://www.2domains.ru домен RU домен RU всего за 99 рублей