Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавление input в textarea с проверкой (https://javascript.ru/forum/dom-window/65357-dobavlenie-input-v-textarea-s-proverkojj.html)

rkocoan 14.10.2016 05:00

Добавление input в textarea с проверкой
 
Здравствуйте.

Интересует функция на js или jquery



Суть работы скрипта при клике на checkbox, так же требуется заполнить текстовый input, после его заполнения значение value обоих input добавляется в textarea.

Соответственно если отметку снова убрать то значение value удаляется с textarea.
input будет более 20 в строку, то есть:

<input type="checkbox" value="1">checkbox <input type="text" value="1"><br>
<input type="checkbox" value="2">checkbox <input type="text" value="2"><br>
<input type="checkbox" value="3">checkbox <input type="text" value="3"><br> и т.д

<!DOCTYPE html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript">
		//Что сюда пишем?
		</script>
	</head>
	<body>
		<div class="input">
			<input type="checkbox" value="1">checkbox <input type="text" value="1"><br>
			<textarea></textarea>
		</div>
	</body>
</html>

warren buffet 14.10.2016 07:20

Цитата:

Сообщение от rkocoan
оба поля добавляется в textarea

Трансцендентально.

rkocoan 14.10.2016 07:22

В общем убедил, исправил)

warren buffet 14.10.2016 07:39

Блин, ты хоть понимаешь, что с твой текстарии юзер может взять и выкосить все?

warren buffet 14.10.2016 07:42

Тогда хотя так сделай

<textarea disabled="disabled"></textarea>



Трансцендентальна сама задача. Попробуй еще раз или напиши, что изобретаешь.

rkocoan 14.10.2016 07:43

Вот код уже писали здесь, но его надо не много переделать то есть это вполне возможно)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
label {
	display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('#options input:checkbox').change(function (){
		setValue();
	});
	loadData();
});
function setValue(){
	var dlm='';
	var val='';
	$('#options input:checkbox').each(function (){
		if (!this.checked) return;
		val=val+dlm+this.value;
		dlm=';';
	});
	$('#txt').val(val);
};
function loadData(){
	var a=$('#txt').val();
	a=a.split(';');
	for (i=0; i<a.length; i++) {
		$('input[value="'+a[i]+'"]').attr('checked',true);
	};
}; 
</script>
</head>
<body>
<div>
	<textarea id='txt'  rows = "5" cols = "120" name = "txt">one;two</textarea>
</div>
<div id='options'>
	<label>
		<input type="checkbox" value='one' onchange="test();"/>one
	</label>
	<label>
		<input type="checkbox" value='two' onchange="test();"/>two
	</label>
	<label>
		<input type="checkbox" value='three' onchange="test();"/>three
	</label>
</div>
</body>
</html>

warren buffet 14.10.2016 07:45

Цитата:

Сообщение от rkocoan
то значение value удаляется с textarea.

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

С текстарией придумай что делать, потом продолжим.

rkocoan 14.10.2016 07:45

Я просто в js не шарю, по этому обращаюсь к профессионалам)

Вам то виднее как правильно сделать, суть работы скрипта я разъяснил.

warren buffet 14.10.2016 07:46

Ищи специалиста по жиквери, я в этой бнопне нихера не понимаю.

rkocoan 14.10.2016 07:46

textarea display:none)


Часовой пояс GMT +3, время: 03:33.