Собрать данные из 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 Подскажите пожалуйста как лучше и проще это сделать. |
<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> |
Этот блок, он динамический. Количество label может быть разным.
Может этот блок завернуть в form и потом симулировать нажатия на отправления в форму, и таким образом получать все данные? |
<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> |
Последнее решение просто шикарное.
Но когда у нас в строчке только label, нет input вставляется 2 enter. То есть появляется пустая строчка. Я пытаюсь ее убрать таким образом area.value = area.value.replace(/\r\n\r\n/g, '\r\n'); Но почему-то не получается. Как это сделать? |
<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> |
Цитата:
Вместо <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> Такую конструкцию и обрабатывать будет удобнее... |
Цитата:
|
Разобрался, помогло:
area.value = area.value.replace(/\n+/g,'\n'); ksa где вы раньше были, мы уже и так сделать :) |
Цитата:
|
Часовой пояс GMT +3, время: 13:42. |