Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Собрать данные из html (https://javascript.ru/forum/dom-window/70478-sobrat-dannye-iz-html.html)

dima85 07.09.2017 22:02

Собрать данные из html
 
Есть такой 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 07.09.2017 23:10

<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 07.09.2017 23:22

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

j0hnik 07.09.2017 23:57

<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 08.09.2017 10:01

Последнее решение просто шикарное.
Но когда у нас в строчке только label, нет input вставляется 2 enter. То есть появляется пустая строчка.
Я пытаюсь ее убрать таким образом
area.value = area.value.replace(/\r\n\r\n/g, '\r\n');

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

j0hnik 08.09.2017 10:22

<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 08.09.2017 10:27

Цитата:

Сообщение от 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>

Конечно его нужно поменять. :)
Вместо
<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 08.09.2017 10:30

Цитата:

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

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

dima85 08.09.2017 10:30

Разобрался, помогло:
area.value = area.value.replace(/\n+/g,'\n');


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

ksa 08.09.2017 10:30

Цитата:

Сообщение от dima85
мы уже и так сделать

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


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