Собрать данные из 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, время: 18:24. |