Собрать данные из 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 где вы раньше были, мы уже и так сделать :) |
Цитата:
|
Покажите тогда пожалуйста ваш пример как разобрать.
|
Цитата:
Ты же про отправку ничего не писал сначала. Типа текст хочу сделать и все такое... |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#txt {
width: 90%;
height: 200px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<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>
<label><input type="checkbox"> text16</label><label><input type="checkbox" checked> text17</label><input value="11">
</div>
</div>
<textarea id='txt'></textarea>
<script type='text/javascript'>
var ot=document.querySelector('#txt');
var dlm='';
[].forEach.call(document.querySelector('#blocks').children, function(el, i){
ot.value+=dlm;
var d='';
[].forEach.call(el.children, function(el, i){
if (el.tagName=='INPUT') {
ot.value+=d+el.value;
} else if (el.tagName=='LABEL') {
ot.value+=d+((el.children[0].checked)? 1: '');
ot.value+=d+el.textContent;
};
d=' ';
});
dlm='\n';
});
</script>
</body>
</html>
|
Спасибо, буду пробовать.
|
| Часовой пояс GMT +3, время: 12:16. |