У меня есть форма html. Когда пользователь нажимает кнопку отправки, я собираю входные значения, используя объект FormData. Я l oop через объект данных формы, используя для l oop. Я делаю это, потому что я хочу хранить значения в массиве. У меня есть несколько форм, которые появляются на моем экране как модальные всплывающие окна. Я заметил, что когда я пу sh значений в массиве, я все еще могу пу sh значений второй и третьей форм, которые я получаю, используя объект FormData.
Моя проблема здесь.
Когда пользователь нажимает кнопку отправки, я получаю созданный массив, но для каждого l oop в for для l oop я получаю массив, созданный со всеми свойствами, которые, как предполагается, l oop через. Может быть, это потому, что JavaScript массивы передаются по ссылке или что-то, что я не понимаю, как обрабатывать.
Вторая проблема, с которой я сталкиваюсь, заключается в том, что, когда я дважды нажимаю кнопку отправки перед обновлением, я все еще пу sh больше свойств в массиве. Я не хочу, чтобы он происходил, потому что я хочу только один раз проверить sh свойств, и это должны быть последние значения, которые я отправил. т.е. я должен заменить предыдущие значения. Я представляю, что пользователь может повторно отправить одну и ту же форму более одного раза, и это не должно означать, что я создаю очень длинный массив с одинаковыми значениями.
Вот мой код:
<form id="modal_feedback_three" class="form" method="POST" action="#" accept-charset="UTF-8">
<section class="modal-feedback-three-top">
<span>
<label for="bathrooms" class="check-boxes">Bath Rooms</label>
<input class="selector" id="bathrooms" name="bathrooms" type="text" value="">
</span>
<span>
<label for="bed-with-bath" class="text-boxes">Bedrooms with Bathrooms</label>
<input class="selector" id="bedwithbath" name="bedwithbath" type="text" value="">
</span>
<span>
<label for="steam-bath" class="text-boxes">Steam Bath Number</label>
<input class="selector" id="steambath" name="steambath" type="text" value="">
</span>
<section class="modal-feedback-three-search">
<button id="submit-three" type="submit" name="feedback-expand-Form-three"
value="submit">submit</button>
</section>
</form>
const formElemnt = document.querySelector('#modal_feedback_three');
formElemnt.addEventListener('submit', myfunction);
let formobj = [];
class FormObjCreator {
constructor(id,value){
this.id = id;
this.value = value
}
}
function myfunction(e){
e.preventDefault();
const formValues = new FormData(formElemnt);
for (const form of formValues) {
formobj.push(new FormObjCreator(form));
console.log(form);
console.log(formobj)
}
}
В основном, когда я нажимаю кнопку отправки, я обнаруживаю, что вместо печати формы, за которой следуют текущие свойства formobj, получаем, что formobj имеет все значения в объекте formValues. Снова, когда я нажимаю кнопку отправки более одного раза, я пу sh столько повторяющихся свойств в массиве formobj. Пожалуйста, помогите.
Я все еще новичок в Javascript.