首先，获取所有元素

Question

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

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

Answer 1

document.getElementById("someFormId").elements;

此系列还包含<select>，<textarea>和<button>元素（among others），但您可能需要这样做。

Answer 2

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

Answer 3

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

示例：

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

希望有所帮助。

Answer 4

也可以使用它：

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 5

SIMPLE表格代码

    <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 6

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

Answer 7

使用此

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

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

Answer 8

如果需要以下值，可以使用FormData：

int

Answer 9

如果您只想要具有name属性的表单元素，则可以过滤表单元素。

const form = document.querySelector("your-form")
Array.from(form.elements).filter(e => e.getAttribute("name"))

Answer 10

如果您对表单或事件中的任何字段有引用，那么您不需要显式查找表单，因为每个表单字段都有一个指向其父表单的form属性。

如果您有活动，那么它将包含target属性，该属性将指向触发它的表单字段，这意味着您可以通过myEvent.target.form访问该表单。

这是一个没有任何表单查找代码的示例。

<html>
<body>
    <form name="frm">
        <input type="text" name="login"><br/>
        <input type="password" name="password"><br/>
        <button type="submit" onclick="doLogin()">Login</button>
    </form>
    <script>
        function doLogin(e) {
            e = e || window.event;
            e.preventDefault();
            var form = e.target.form;
            alert("user:" + form.login.value + " password:" + form.password.value);
        }
    </script>
</body>
</html>

如果页面上有多个表单，您仍然不需要按名称或ID标记它们，因为您始终可以通过事件或通过对字段的引用来获取正确的表单实例。

Answer 11

尝试此操作以获取所有表单字段。

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

Answer 12

您希望如何区分表单？您可以使用不同的ID，然后使用此功能：

function getInputElements(formId) {
    var form = document.getElementById(formId);
    if (form === null) {
        return null;
    }
    return form.getElementsByTagName('input');
}

Answer 13

首先，获取所有元素

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);

Answer 14

let formFields     = form.querySelectorAll(`input:not([type='hidden']), select`)

ES6版本，如果需要的话，可以忽略隐藏的字段

Answer 15

我本可以发誓在表单上曾经有一个方便的fields属性，但是…一定是我的想象力。

我只是这样做（针对<form name="my_form"></form>），因为我通常不希望自己使用字段集：

let fields = Array.from(document.forms.my_form.querySelectorAll('input, select, textarea'));

Answer 16

您可以通过简单地获取包含属性 name

的所有元素来进行选择

let form = document.querySelector("form");

form.querySelectorAll("[name]");

这将返回表单的所有相关元素。

获取特定表单的所有元素

16 个答案:

首先，获取所有元素

第二，对他们做点事情

如果您要使用表单而不是页面的整个正文，则可以这样做