Question

我需要在不使用jQuery的情况下从多个表单输入值构建对象。

"profile":[
{
   "name":"Joe",
   "name2":"Doe",
   "address":"1st Maint Street",
},
{
    "name":"Mary",
    "name2":"Doe",
    "address":"2nd Maint Street",
 },

最终结果应该是对象：

var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
    return {'value':input.value};
});

用户可以动态添加表单，因此我可以在主表单div中嵌入多个表单。

我能够获得第一个表格值，但是当添加多个表格时，我陷入了困境，我试图遍历主要元素，但无法正常工作。上面是我的第一个代码示例。

#include <iostream>

int fibonacci(long long n) {
    if (n <= 1)
        return n;

    long long previous = 0;
    long long current  = 1;

    for (long long i = 0; i < n - 1; ++i) {
        long long tmp_previous = previous;
        previous = current;
        current = tmp_previous + current;
    }

    return current;
}

int main() {
    long long n = 0;
    std::cin >> n;
    std::cout << fibonacci(n);
}

Answer 1

看看这个-使用querySelectorAll，forEach和push。

或者，只要回调返回创建的对象，则为Array.map。 HTML元素集合需要转换为Array才能使用map

console.log("Using forEach on the HTML collection")

let profile = [];
document.querySelectorAll("form").forEach(f => {
  let obj = {};
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  profile.push(obj)
})
console.log(profile)

// ---------------------------------------------------------------

console.log("Using Array.map on a HTML collection cast to Array")

profile = [...document.querySelectorAll("form")].map(f => {
  let obj = {};
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  return obj;
})
console.log(profile)

<div id="formMain">
  <form id="form_id_1" class="formClass">
    <div id="fullname">
      <p>Full Name</p>
      <input type="text" class="inputClass" name="name" value="Joe">
      <br/>
      <input type="text" class="inputClass" name="name2" value="Doe">
    </div>
    <div id="Address">
      <p>Address</p>
      <input type="text" class="inputClass" name="address" value="1st Maint Street">
    </div>
  </form>
  <form id="form_id_2" class="formClass">
    <div id="fullname">
      <p>Full Name</p>
      <input type="text" class="inputClass" name="name" id="name1" value="Mary">
      <br/>
      <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
    </div>
    <div id="Address">
      <p>Address</p>
      <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
    </div>
  </form>
</div>

Answer 2

var forms = document.querySelectorAll("form");
var result = Array.from(forms).map(a => {
	var obj = {};
	Array.from(a.querySelectorAll("[name]")).forEach(b => {
		obj[b.getAttribute("name")] = b.value;
	});
	return obj;
});
console.log(result);

   <div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>

Answer 3

querySelectorAll（mdn）可用于获取表单和输入。
flatMap（mdn）可用于将表单映射到输入。
扩展语法[...iterable]（mdn）可用于将querySelectorAll返回的节点列表转换为数组。

let inputs = [...document.querySelectorAll('form')].flatMap(a => [...a.querySelectorAll('input')]);
console.log(inputs);

<div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>

Answer 4

您可以尝试以下操作

var formMain = document.getElementById("formMain");
var formMresultAreaain = document.getElementById("resultArea");
var result = [];
var formData = '<form class="formClass">' +
  '<div id="fullname">' +
  '<p>Full Name</p>' +
  '<input type="text" class="inputClass" name="name" value="Joe">' +
  '<br/>' +
  '<input type="text" class="inputClass" name="name2" value="Doe">' +
  '</div>' +
  '<div id="Address">' +
  '<p>Address</p>' +
  '<input type="text" class="inputClass" name="address" value="1st Maint Street">' +
  '</div>' +
  '</form>';

function addForm() {
  formMain.innerHTML += formData;
}

function submitForms() {
  var forms = document.getElementsByTagName("form");
  var inputs;
  var tempResult = {};
  result = [];
  for (var i = 0; i < forms.length; i++) {
    inputs = forms[i].getElementsByTagName("input");
    tempResult = {};
    for (var j = 0; j < inputs.length; j++)
      tempResult[inputs[j].name] = inputs[j].value;
    result.push(tempResult);
  }
  console.log(result);
}

<input type="button" onclick="addForm()" value="Add Form" />

<div id="formMain">

</div>

<hr/>

<input type="button" onclick="submitForms()" value="Submit" />

Answer 5

您可以添加回调，调度和侦听事件，或者在添加新表单时进行轮询，然后使用表单容器选择器遍历表单。

示例

const forms = document.querySelector("#formMain form");
if (forms.length) {
    forms.forEach(form, () => {
        // Do somthing here
    }
}

Javascript通过多种形式循环，获取所有输入值

5 个答案: