获取特定表单的所有元素

Question

function getInputElements() {
    var inputs = document.getElementsByTagName("input");
}

上面的代码获取了input具有多个表单的页面上的所有元素.如何input使用纯JavaScript 获取特定表单的元素？

Answer 1

document.getElementById("someFormId").elements;

此集合还将包含<select>元素,但您可能需要它.

Answer 2

如果您想要这些值，可以使用FormData ：

var form = document.getElementById('form-name');
var data = new FormData(form);
for (var [key, value] of data) {
    console.log(key, value)
}

Answer 3

document.forms["form_name"].getElementsByTagName("input");

Answer 4

你们都在专注于问题中的"获取"这个词.尝试任何形式的'elements'属性,这是你可以迭代的集合,即你编写自己的'get'函数.

例:

function getFormElelemets(formName){
  var elements = document.forms[formName].elements;
  for (i=0; i<elements.length; i++){
    some code...
  }
}

希望有所帮助.

Answer 5

var inputs = document.getElementById("formId").getElementsByTagName("input");
var inputs = document.forms[1].getElementsByTagName("input");

2020 年更新：

var inputs = document.querySelectorAll("#formId input");

Answer 6

也可以使用这个:

var user_name = document.forms[0].elements[0];
var user_email = document.forms[0].elements[1];
var user_message = document.forms[0].elements[2];

表单的所有元素都通过Javascript存储在数组中.这将从第一个表单中获取元素,并将每个值存储到唯一变量中.

Answer 7

松散相关，但如果您想获取对象中的所有表单项，您可以：

Object.fromEntries(new FormData(document.querySelector('form')).entries())

哪个产量

{
   email: "thao@le.com",
   password: "mypassword"
}

Answer 8

简单的表格代码

    <form id="myForm" name="myForm">
        <input type="text" name="User" value="Arsalan"/>
        <input type="password" name="pass" value="123"/>
        <input type="number" name="age" value="24"/>
        <input type="text" name="email" value="johndoe@test.com"/>
        <textarea name="message">Enter Your Message Her</textarea>

    </form>

Javascript代码

//Assign Form by Id to a Variabe
    var myForm = document.getElementById("myForm");
    //Extract Each Element Value
    for (var i = 0; i < myForm.elements.length; i++) {
    console.log(myForm.elements[i].value);
    }

JSFIDDLE:http://jsfiddle.net/rng0hpss/

Answer 9

用这个

var theForm = document.forms['formname']
[].slice.call(theForm).forEach(function (el, i) {
    console.log(el.value);
});

el 代表特定的表单元素。使用它比 foreach 循环更好，因为 foreach 循环还返回一个函数作为元素之一。然而，这只返回表单的 DOM 元素。

Answer 10

试试这个以获取所有表单字段。

var fields = document['formName'].elements;

Answer 11

首先，获取所有元素

const getAllFormElements = element => Array.from(element.elements).filter(tag => ["select", "textarea", "input"].includes(tag.tagName.toLowerCase()));

其次，和他们做点什么

const pageFormElements = getAllFormElements(document.body);
console.log(pageFormElements);

如果你想使用表单，而不是整个页面，你可以这样做

const pageFormElements = getAllFormElements(document.getElementById("my-form"));
console.log(formElements);