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中。如果不触摸包装，就无法获得礼物。

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

1 个答案: