使用MVC模式的多个表单Ajax请求，获取输入字段的新值答案

【问题标题】：Multiple forms Ajax request using MVC pattern, get the new values of input fields使用MVC模式的多个表单Ajax请求，获取输入字段的新值
【发布时间】：2019-01-29 10:22:44
【问题描述】：

我正在从我的页面中检索表单，使用：

 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。

【问题讨论】：

标签： javascript ajax forms

【解决方案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 中。不碰包装就无法得到礼物。

【讨论】：