Как пройти по DOM и собрать данные с input в древовидный объект?
Как обойти input страницы и записать их значения в древовидный объект? Все блоки добавляются динамически, их количество не ограниченно. html разметка:
<div id="form" class="form">
<div class="block1">
<input type="text" placeholder="Дата" id="date">
<input type="text" placeholder="Вид загрузки" id="carType">
<div class="block2" id="1">
<input type="text" class="out" placeholder="Исходящий" id="1">
<div class="add4">4</div>
<div class="block3" id="1">
<input type="text" class="point" placeholder="Пункт" id="1">
<div class="add3">3</div>
<div class="block4" id="1">
<input type="text" class="car" placeholder="ТС" id="1">
<div class="add2">2</div>
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div>
<div class="block4" id="2">
<input type="text" class="car" placeholder="ТС" id="2">
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div></div>
<div class="block3" id="2">
<input type="text" class="point" placeholder="Пункт" id="2">
<div class="block4" id="1">
<input type="text" class="car" placeholder="ТС" id="1">
<div class="add2">2</div>
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div>
<div class="block4" id="2">
<input type="text" class="car" placeholder="ТС" id="2">
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div></div></div>
<div class="block2" id="2">
<input type="text" class="out" placeholder="Исходящий" id="2">
<div class="block3" id="1">
<input type="text" class="point" placeholder="Пункт" id="1">
<div class="add3">3</div>
<div class="block4" id="1">
<input type="text" class="car" placeholder="ТС" id="1">
<div class="add2">2</div>
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div>
<div class="block4" id="2">
<input type="text" class="car" placeholder="ТС" id="2">
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div></div>
<div class="block3" id="2">
<input type="text" class="point" placeholder="Пункт" id="2">
<div class="block4" id="1">
<input type="text" class="car" placeholder="ТС" id="1">
<div class="add2">2</div>
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div>
<div class="block4" id="2">
<input type="text" class="car" placeholder="ТС" id="2">
<div class="block5" id="1">
<div class="add1">1</div>
<input type="file" class="amount" id="1">
<input type="file" class="amount" id="2"></div>
</div></div></div></div>
<button class="sub-btn" id="btn">Отправить</button>
Пример заполненной формы:
Как при помощи нативного JavaScript или при помощи jQuery (Или других библиотек) получить данные со всех полей с сохранением иерархии в древовидный объект? Пример объекта которого я хочу получить:
var array = {
block1_1: {
value: "1123",
block2_1: {
value: "1",
block3_1: {
value: "Т700АК",
block5_1: {
value: "1.mp4"
},
block5_2: {
value: "2.mp4"
}
},
block3_2: {
value: "Т654АК",
block5_1: {
value: "3.mp4"
},
block5_2: {
value: "4.mp4"
}
}
},
block2_2: {
value: "2",
block3_1: {
value: "Т689АК",
block5_1: {
value: "5.mp4"
},
block5_2: {
value: "6.mp4"
}
},
block3_2: {
value: "Т669АК",
block5_1: {
value: "7.mp4"
},
block5_2: {
value: "8.mp4"
}
}
},
},
block1_2: {
value: "1124",
point_1: {
value: "1",
block3_1: {
value: "Т692АК",
block5_1: {
value: "9.mp4"
},
block5_2: {
value: "10.mp4"
}
},
block3_2: {
value: "Е404ОН",
block5_1: {
value: "11.mp4"
},
block5_2: {
value: "12.mp4"
}
}
},
point_2: {
value: "2",
block3_1: {
value: "Н190МТ",
block5_1: {
value: "13.mp4"
},
block5_2: {
value: "14.mp4"
}
},
block3_2: {
value: "О839МУ",
block5_1: {
value: "15.mp4"
},
block5_2: {
value: "16.mp4"
}
}
}
}
};
Ответы (1 шт):
Автор решения: Eugene X
→ Ссылка
Если собираешься отправлять файлы через JSON, то скорее всего никак...
Если приёмщик PHP или NodeJS то можно вот так. Что в express body-parser, что PHP Умеют понимать вот такой вот синтаксис.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
echo "<h1>Post Fields</h1>";
echo "<pre><code>";
print_r($_POST);
echo "</code></pre>";
echo "<h1>Post Files</h1>";
echo "<pre><code>";
print_r($_FILES);
echo "</code></pre>";
}
?><form method="post" enctype="multipart/form-data" action="<?= $_SERVER['PHP_SELF'] ?>">
<p>p1v</p>
<input name="point[1][value]">
<p>p1c1</p>
<input name="point[1][car][1][value]">
<p>p1c1f1</p>
<input type="hidden" name="point[1][car][1][file][1]" value="point_1_car_1_file_1">
<input name="point_1_car_1_file_1" type="file">
<p>p1c1f2</p>
<input type="hidden" name="point[1][car][1][file][2]" value="point_1_car_1_file_2">
<input name="point_1_car_1_file_2" type="file">
<p>p2v</p>
<input name="point[2][value]">
<input type="submit">
</form>
На выходе получается следующий массив
Post Fields
Array
(
[point] => Array
(
[1] => Array
(
[value] => p1v
[car] => Array
(
[1] => Array
(
[value] => p1c1
[file] => Array
(
[1] => point_1_car_1_file_1
[2] => point_1_car_1_file_2
)
)
)
)
[2] => Array
(
[value] => p2v
)
)
)
Post Files
Array
(
[point_1_car_1_file_1] => Array
(
[name] => 0000001.png
[type] => image/png
[tmp_name] => /tmp/php6D9F.tmp
[error] => 0
[size] => 766645
)
[point_1_car_1_file_2] => Array
(
[name] => 0000002.png
[type] => image/png
[tmp_name] => /tmp/php6DB0.tmp
[error] => 0
[size] => 803329
)
)