Собрать данные из html

[dima85]

Есть такой html блок, при необходимости его можно подкорректировать

<div id="blocks">
<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13"><br>
<label><input type="checkbox"> text3</label><br>
<label><input checked="" type="checkbox"> text4</label><input value="text"><br>
<label><input type="checkbox"> text15</label><input value="10"><br>
</div>

Нужно в textarea собрать данные этого блока, вот так:

1 text1 20 13
text3
1 text4 text
text15 10

Если на checkbox есть галочка то добавляем "1" в начало строки. input полей может быть до 3.

Подскажите пожалуйста как лучше и проще это сделать.

[j0hnik]

<div id="blocks">
<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13"><br>
<label><input type="checkbox"> text3</label><br>
<label><input checked="" type="checkbox"> text4</label><input value="text"><br>
<label><input type="checkbox"> text15</label><input value="10"><br>
</div>
<textarea cols="30" rows="10"></textarea>
<script>
	var inp = document.querySelectorAll('input');
	var label = document.querySelectorAll('label');
function ss(){
	document.querySelector('textarea').value = +inp[0].checked+''+label[0].textContent+' '+inp[1].value+' '+inp[2].value+'\n'+(+inp[3].checked)+''+label[1].textContent+'\n'+(+inp[4].checked)+''+''+label[2].textContent+' '+inp[5].value+'\n'+(+inp[6].checked)+''+label[3].textContent+' '+inp[7].value;
	}
	document.querySelector('#blocks').onchange=ss;
	ss();
</script>

[dima85]

Этот блок, он динамический. Количество label может быть разным.
Может этот блок завернуть в form и потом симулировать нажатия на отправления в форму, и таким образом получать все данные?

[j0hnik]

<div id="blocks">
<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13"><br>
<label><input type="checkbox"> text3</label><br>
<label><input checked="" type="checkbox"> text4</label><input value="text"><br>
<label><input type="checkbox"> text15</label><input value="10"><br>
</div>
<textarea cols="30" rows="10"></textarea>
<script>
var area = document.querySelector('textarea');
[].forEach.call(document.querySelectorAll('#blocks>*'), function(el, i){
	if(el.matches('label')) {
		area.value +=i?'\n'+(+el.children[0].checked):+el.children[0].checked;
		area.value += el.textContent;
	}
	if(el.matches('input')) area.value += ' '+el.value;
});
</script>

[dima85]

Последнее решение просто шикарное.
Но когда у нас в строчке только label, нет input вставляется 2 enter. То есть появляется пустая строчка.
Я пытаюсь ее убрать таким образом

area.value = area.value.replace(/\r\n\r\n/g, '\r\n');

Но почему-то не получается. Как это сделать?

[j0hnik]

<div id="blocks">
<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13"><br>
<label><input type="checkbox"> text3</label><br>
<label><input checked="" type="checkbox"> text4</label><input value="text"><br>
<label><input type="checkbox"> text15</label><input value="10"><br>
</div>
<textarea cols="30" rows="10"></textarea>
<script>
var area = document.querySelector('textarea');
[].forEach.call(document.querySelector('#blocks').children, function(el, i){
	if(el.matches('label')) {
		area.value +=+el.children[0].checked;
		area.value += el.textContent;
	}
	if(el.matches('input')) area.value += ' '+el.value;
	if(el.matches('br')) area.value += '\n';
});
area.value = area.value.replace(/^\s+|\s+$/gm, '');
</script>

[ksa]

<div id="blocks">
<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13"><br>
<label><input type="checkbox"> text3</label><br>
<label><input checked="" type="checkbox"> text4</label><input value="text"><br>
<label><input type="checkbox"> text15</label><input value="10"><br>
</div>

Конечно его нужно поменять.
Вместо

<br>

делать "строки" нужно отдельными ДИВами

<div id="blocks">
	<div>
		<label><input checked="" type="checkbox"> text1</label><input value="20"><input value="13">
	</div>
	<div>
		<label><input type="checkbox"> text3</label>
	</div>
	<div>
		<label><input checked="" type="checkbox"> text4</label><input value="text">
	</div>
	<div>
		<label><input type="checkbox"> text15</label><input value="10">
	</div>
</div>

Такую конструкцию и обрабатывать будет удобнее...

[ksa]

Может этот блок завернуть в form и потом симулировать нажатия на отправления в форму, и таким образом получать все данные?

Если дело в отправке данных - то так и нужно сделать.

[dima85]

Разобрался, помогло:

area.value = area.value.replace(/\n+/g,'\n');

ksa где вы раньше были, мы уже и так сделать

[ksa]

мы уже и так сделать

Лучше сделать нормально, чем гоношить разные пришлепочки.