Случайный выбор победителя «Вконтакте»   •   Online-инструменты
1 048 просм
8 комм
Поделиться:

Объединяем несколько значений input/textarea в одном поле на jQuery

Некоторые CMS бывают ограничены в требуемом функционале, и приходится вносить свои корректировки. С помощью следующего несложного скрипта вы сможете объединить 2 поля input (или textarea) в одном. Для чего это может быть нужно? Если у вас есть только одно свободное поле для данных, предоставляемое CMS, то из него вы сможете сделать необходимое вам количество полей.

Объединяем несколько значений input/textarea в одном поле

Принцип расширения функционала довольно прост: информация из каждого созданного вами поля записывается в рабочее поле, где разделяется знаком (в нашем случае это знак пробела), то есть она хранится в одном поле, а визуально находится в нескольких.

Вот, собственно, сам код:

<div>Поле 1:</div>
<input name="name" class="name" type="text" />

<div>Поле 2:</div>
<input name="phone" class="phone" type="text" />

<div>Сумма полей:</div>
<input id="all_save" name="all_save" type="text" readonly />

<script>
	$('.name, .phone').bind('keyup', function() {
		var name = $('.name').val(); // Получаем содержимое 1-го поля
		var phone = $('.phone').val(); // Получаем содержимое 2-го поля
		$('#all_save').val(name+' '+phone); // Записываем данные двух полей в 3-е поле.
	});
</script>

Где .name и .phone – это классы ваших созданных полей, а #all_save – это id поля, где нужно объединить значения первых двух.

C помощью этого скрипта на одном из сайтов я смог добавить дополнительное поле для комментариев, исключив тем самым лишнюю работу с базой данных.

8
комментарий
Gh8st
3.03 в 14:09
Странно у меня почему-то не работает данный код. А возможно таким вот образом объединить значения input, textarea, select но с вставкой в textarea на разные строки? Можете подсказать в каком направлении копать. Желательно на jQuery.
  • 1
Gh8st, с select я думаю будет немного проблематично. Почему? Потому что select мы выбираем, а textarea и input вы вводим - скрипт реагирует именно на ввод информации. Но вот textarea и input вы можете легко объединить в другое поле - главное пропишите их идентификаторы (id или class).

Честно скажу, заинтересовали меня этом вопросом - постараюсь ночью адаптировать этот код под ваши нужны
  • 0
Gh8st, спасибо за Ваш комментарий - код приведенный в статье действительно не совсем корректный, и решение на jq на много стабильнее и удобнее. Ожидайте, во второй половине дня обновим решение
  • 1
Gh8st, Мы обновили скрипт в статье.

Из решений вашей задачи, на ум у меня пришло следующее - мы добавляем еще одну переменную с помощью которой считываем выбранный элемент select а так же в функцию bind указываем несколько событий (в нашем случае это keyup и change). Итоговое решение будет таким:

$('.name, .phone, #select').bind('keyup change', function() {
var name = $('.name').val();
var phone = $('.phone').val();
var select = $("#select option:selected").text();
$('#all_save').val(name+' '+phone+' '+select);
});

Где #select - id вашего select.
  • 1
Gh8st
9.03 в 13:28
Благодарю. Буду разбираться ;)
  • 0
Gh8st
16.08 в 22:44
Привет smiley Давненько не заходил на твой блог :) Можно ли каким либо образом разделить выбранные пункты списка, если у него стоит атрибут multiple?
Пример: https://codepen.io/anon/pen/MvraZR
  • 1
Привет! wink

В твоем скрипте строку:

var select = $("#select option:selected").text();

замени на:

var select = $("#select").val() || [];

и в результате используй:

select.join(", ")

То есть в твоем случае будет:

$('#all_save').val(name+' \n'+phone+' \n'+select.join(", "));

Где «, » - твой разделитель
  • 1
Gh8st
16.08 в 23:28
Оперативно cool Спасибо, выручил.
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария