Супербыстрый хостинг на SSD от 115р в месяц   •   Реклама
4 236 просм
10 комм
Поделиться:

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

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

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

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

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

<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 помощью этого скрипта на одном из сайтов я смог добавить дополнительное поле для комментариев, исключив тем самым лишнюю работу с базой данных.

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

Сергей, строку:

var test = $(".test ? false : true").text();

замените на:

var test = $(".test").prop("checked");

  • 0
21.02 в 10:57

Ребята, кто подскажет, как добавить еще чекбоксы к этим полям, чтобы выводилась сумма значений.

$('.name, .phone, #select, .test').bind('keyup change', function() {

var name = $('.name').val();

var phone = $('.phone').val();

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

var test = $(".test ? false : true").text();

$('#all_save').val(name+' \n'+phone+' \n'+select+' \n'+test);

});

<div>Поле 1:</div>

<input name="name" class="name" type="text" />

<div>Поле 22222:</div>

<input name="test" class="test" type="checkbox" />Да/Нет

<div>Поле 2:</div>

<input name="phone" class="phone" type="text" />

<div>Поле 3:</div>

<select id="select">

<option></option>

<option>2016</option>

<option>2017</option>

<option>2018</option>

</select>

<div>Сумма полей:</div>

<textarea id="all_save" name="all_save" type="text" rows="5" cols="15" readonly /></textarea>

  • 0
16.08 в 23:28

Оперативно cool Спасибо, выручил.

  • 0

Привет! wink

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

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

замени на:

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

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

select.join(", ")

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

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

Где «, » - твой разделитель

  • 12
16.08 в 22:44

Привет smiley Давненько не заходил на твой блог :) Можно ли каким либо образом разделить выбранные пункты списка, если у него стоит атрибут multiple?

Пример: https://codepen.io/anon/pen/MvraZR

  • 1
9.03 в 13:28

Благодарю. Буду разбираться ;)

  • 0

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.

  • 10

Gh8st, спасибо за Ваш комментарий - код приведенный в статье действительно не совсем корректный, и решение на jq на много стабильнее и удобнее. Ожидайте, во второй половине дня обновим решение

  • 11

Gh8st, с select я думаю будет немного проблематично. Почему? Потому что select мы выбираем, а textarea и input вы вводим - скрипт реагирует именно на ввод информации. Но вот textarea и input вы можете легко объединить в другое поле - главное пропишите их идентификаторы (id или class).

Честно скажу, заинтересовали меня этом вопросом - постараюсь ночью адаптировать этот код под ваши нужны

  • 5
3.03 в 14:09

Странно у меня почему-то не работает данный код. А возможно таким вот образом объединить значения input, textarea, select но с вставкой в textarea на разные строки? Можете подсказать в каком направлении копать. Желательно на jQuery.

  • 2
Подняться наверх
«Pandoge» - помощник веб-мастера