I have HTML as below
<div class="link-field">
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
</div>
I have tried to iterate over each assets-form and create object like below
[
{
"link": "http://google.com/one",
"description": "Link One"
},
{
"link": "http://google.com/two",
"description": "Link Two"
}
]
using below function
$.map($('.assets-form'), function(field) {
console.log(field)
});
Here I'm not able to construct the hash after looping over each div
you can launch the map function after form have been complete
in my sample i add a button to have to be click after input have been filled
you can recover field value by $(field).find({fieldSelector})
function mapField() {
let links = [];
links = $.map($('.assets-form'), function(field) {
return {
link:$(field).find('#link').val(),
description:$(field).find('#description').val(),
}
});
console.log(links);
}<div class="link-field">
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
</div>
<button onclick="mapField()">map field</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>