Как обойти 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"
}
}
}
}
};