通过JavaScript获取所有表单值
问题出现的原因：需要通过JavaScript获取表单中所有的值。
解决方法：使用ECMAScript 6中的原生JavaScript解决方案。
代码如下：
const form = document.getElementById("sampleForm");
form.addEventListener("submit", e => {
e.preventDefault();
let reqBody = {};
Object.keys(form.elements).forEach(key => {
let element = form.elements[key];
if (element.type !== "submit") {
reqBody[element.name] = element.value;
}
});
submitForm(reqBody); // 调用表单提交函数
});
以上代码通过获取表单元素对象，遍历所有元素，并将非提交按钮的元素名称和值存储在一个对象中，最后调用submitForm函数来提交表单。
问题的出现原因：这段代码是用来获取表单中所有值的JavaScript代码。然而，代码中存在一些问题，导致无法正确获取表单中的所有值。其中包括以下几个问题：
1. 代码中使用了switch语句来判断表单元素的类型，但是并未考虑到所有可能的类型，比如input[type="tel"]。
2. 代码中存在多个相同name属性但不同value属性的
3. 代码中使用了"&"作为连接符，但是在实际使用中应该使用"&"。
解决方法：修复上述问题，使得代码能够正确获取表单中的所有值。
以下是修复后的代码：
var data;
function serialize(form) {
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
}
break;
}
break;
case 'file':
break;
case 'TEXTAREA':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
if (form.elements[i].clicked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
}
break;
}
break;
}
}
data = q.join("&");
}
在表单中添加onchange属性，使得在表单内容发生变化时自动调用serialize函数：
问题出现的原因是有一部分用户的浏览器不支持ECMAScript 6的Object.values方法，导致无法获取表单的所有值。另外，解决方法中的代码还包含了一些不是表单输入的值。
解决方法是使用Object.values(form.elements)代替Object.values(form)，这样可以解决浏览器不支持Object.values方法的问题，并且只获取表单输入的值。
以下是最终整理的
在JavaScript中通过表单获取所有值的方法
对于输入字段，你可以使用ECMAScript 6的以下方法：
首先将表单赋值给一个常量：
const form = document.querySelector('form')
然后获取所有值：
Object.values(form.elements).reduce((obj, field) => { obj[field.name] = field.value; return obj }, {})
上述代码会生成一个以输入名为键，值为值的对象。
这种解决方法看起来很漂亮，但仍然存在一些问题：1）仍然有很多用户使用不支持Object.values方法的浏览器；2）结果中包含了一些不是表单输入的值。为了解决这个问题，你可以使用Object.values(form.elements)代替Object.values(form)。
如果按照这种修复方法并基于Object.keys()编写代码，我会点赞的。
在编写ES6代码时，你可能需要使用Babel转译器。
希望以上内容能帮助你通过JavaScript获取表单的所有值。