Несколько форм Ajax-запроса с использованием шаблона MVC, получить новые значения полей ввода

Question

Я извлекаю формы со своей страницы, используя:

 DOMS = {
            form: '[data-form]', 
}

     document.querySelectorAll(DOMS.fom).forEach(function (form, index) {

                    arr[index] = {};
                    arr[index]['DOMRef'] = form; 
}

и добавляю их к объекту.Я добавляю событие:

addEventListener('submit', function (event) {
                    send(event, form);
                });

Позже при отправке формы я извлекаю форму и перебираю ее через:

form = arr[1];
for (i = 0; i < form.elements.length; i++) {
                if (form.elements[i].type !== 'submit') {
                    data = data + form.elements[i].name + '=' + form.elements[i].value;
                }
            }

Выше я создаю данные запроса Ajax.Проблема в том, что я всегда получаю первое значение (без обновления).

Если я изменяю значение поля формы, игнорируется, я полагаю, потому что я вызываю его из объекта, а не снова из DOM.Что-то вроде обновления формы.

Но я также не хочу, если возможно вызывать форму DOM каждый раз.

Answer 1

Вы делаете копии своих форм где-то, и вызов из объекта не должен влиять.

document.addEventListener('submit', function (e) {
                    collectFormData(e);
                });
				
let formsArr = document.querySelectorAll("form");
let formsObj = {fArr: formsArr};

function collectFormData(e){
	e.preventDefault();
  //event.target
	var currForm = e.target;
	for(i=0; i<currForm.elements.length; i++){
	if(currForm.elements[i].type !== 'submit')
		console.log(currForm.elements[i].value);
	}
  //array
	for(j=0; j<formsArr[0].elements.length; j++){
		console.log(formsArr[0].elements[j].value);
	}
  //object
	for(k=0; k<formsObj.fArr[0].elements.length; k++){
		console.log(formsObj.fArr[0].elements[k].value);
	}
}

<form name="myForm" id="myform" action="" method="POST" enctype="multipart/form-datam">
    <input type="text" class="val1" name="val1" id="val1" />
	<input type="text" class="val2" name="val2" id="val2" />
	<input type="text" class="val3" name="val3" id="val3" />
	<button type="submit">submit</button>
</form>

PS. Но я также не хочу, если возможно вызывать форму DOM каждый раз Значение поля ввода находится в (стороне) DOM.Вы не можете получить подарок, не касаясь посылки.