主页 / 问题 / 946553
Accepted
Igor
Asked:2020-02-19 15:39:23 +0000 UTC2020-02-19 15:39:23 +0000 UTC

如何从一个表单中获取所有值？

  • 772

如果我们知道每个单独输入的名称，从表单中获取输入的值相对方便。是否有一种相对简单的方法可以从表单中获取任何输入的值，我的意思是通过本地方式。

const form = document.querySelector('form');

const submit = e => {
  e.preventDefault();
  console.log(e.currentTarget.name.value);
  console.log(e.currentTarget.name2.value);
  console.log(e.currentTarget.name3.value);
  console.log(e.currentTarget.values); // ??
}
form.addEventListener('submit', submit)
<form>
  <div>
    <input name="name" />
  </div>
  <div>
    <input name="name2" />
  </div>
  <div>
    <input name="name3" />
  </div>
  <button>GO</button>
</form>

javascript

3 个回答

  1. Best Answer

    const form = document.querySelector('form');

const submit = (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  for(let pair of formData.entries()) {
     console.log(pair); // где pair - это массив вида [name, value]
  }
}
form.addEventListener('submit', submit)
    <form>
  <div>
    <input name="name" value="1" />
  </div>
  <div>
    <input name="name2" value="2" />
  </div>
  <div>
    <input name="name3" value="3" />
  </div>
  <button>GO</button>
</form>

    • 2 

  2. const form = document.querySelector('form');

const submit = e => {
  e.preventDefault();
  e.currentTarget.querySelectorAll('input').forEach(function(field){
    console.log(field.name+"="+field.value);
  });
}
form.addEventListener('submit', submit)
    <form>
  <div>
    <input name="name" />
  </div>
  <div>
    <input name="name2" />
  </div>
  <div>
    <input name="name3" />
  </div>
  <button>GO</button>
</form>

    • 1

  3. 所有具有 name 属性的字段都可以通过其名称或索引访问。表单元素也有一个长度属性。

    因此，您可以通过一个简单的循环遍历所有重要元素：

    const form = document.querySelector('form');

const submit = e => {
  e.preventDefault();
  for (var i = 0; i < e.currentTarget.length; i++) {
    console.log(e.currentTarget[i].value);
  }
}
form.addEventListener('submit', submit)
    <form>
  <div>
    <input name="name" />
  </div>
  <div>
    <input name="name2" />
  </div>
  <div>
    <input name="name3" />
  </div>
  <button>GO</button>
</form>

    • 1

相关问题