у меня есть блок с формой HTML:
<div class="cover mb-3 d-flex flex-wrap justify-content-center video__merge" id="video">
<h3>Merge video from YouTube</h3>
<p class="video_input">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod amet fugit neque ullam,
id temporibus accusantium quaerat maxime aspernatur eum dolore repellat,
suscipit perferendis quae expedita. Aperiam ipsa eligendi illo?</p>
<div class="container">
<form method="POST" action="/" id="form__videos">
{{ form.hidden_tag()}}
{{form.name}}
{{form.name}}
</form>
</div>
<span>
<button type="button" class="btn btn__main btn__add add_video">Add Video</button>
<button type="submit" class="btn btn__main btn__send__video">Start Merge</button>
</span>
</div>
На кнопку Add Video повешена функция добавления input:
const btnAddVideo = document.querySelector(".add_video")
const ContainerVideo = videos.querySelector(".container")
let videoForm = ContainerVideo.querySelector("#form__videos")
btnAddVideo.addEventListener('click', () =>{
let input = document.createElement('input')
input.classList.add('form-control')
input.classList.add('video_input')
input.placeholder = "Paste link from YouTube"
input.id = "formGroupExampleInput"
videoForm.appendChild(input)
})
После я навешиваю на кнопку btn__send__video вывод в консоль форму
const btnSendVideo = document.querySelector(".btn__send__video")
let videoForm = ContainerVideo.querySelector("#form__videos")
btnSendVideo.addEventListener('click',() =>{
console.log(videoForm)
let formData = new FormData(videoForm)
for(let [name, value] of formData){
console.log(`${name} == ${value}`)
}
})
Получаю такой вывод:
<form method="POST" action="/" id="form__videos">
<input id="csrf_token" name="csrf_token" type="hidden" value="ImE3MDM0ZWU2YmIzYTE1NWRhNzc3ZWFlNWQzODk2ZmYzODY4MTc4ZTMi.YvgPjQ.-pbbH2CG8zN5PBez16VLUAnG92E">
<input class="form-control video_input" id="formGroupExampleInput" name="name" placeholder="Paste link from YouTube" type="text" value="">
<input class="form-control video_input" id="formGroupExampleInput" name="name" placeholder="Paste link from YouTube" type="text" value="">
<input class="form-control video_input" placeholder="Paste link from YouTube" id="formGroupExampleInput"></form>
csrf_token == ImE3MDM0ZWU2YmIzYTE1NWRhNzc3ZWFlNWQzODk2ZmYzODY4MTc4ZTMi.YvgPjQ.-pbbH2CG8zN5PBez16VLUAnG92E
name == test1
name == test2
Почему в переменной videoForm JavaScript видит, что полей 4, а в formData показывает только три поля?