Javascript 获取特定窗体的所有元素

上面的代码获取具有多个表单的页面上的所有

输入

元素。如何使用普通JavaScript获取特定表单的

输入

元素

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

2020年更新：

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

---

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

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

---

此集合还将包含

、

和

元素（），但您可能需要这些元素。

也可以使用以下内容：

document.getElementById("someFormId").elements;

---

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

大家都在关注问题中的“get”一词。尝试任何形式的“elements”属性，它是一个可以迭代的集合，即编写自己的“get”函数

例如：

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

函数getFormElelemets（formName）{ var elements=document.forms[formName].elements； 对于（i=0；i简单形式代码

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

把你的信息输入她

Javascript代码

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

//将表单按Id分配给变量
var myForm=document.getElementById（“myForm”）；
//提取每个元素的值
对于（var i=0；i

jsiddle:

使用这个

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

---

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

如果对表单或事件中的任何字段都有引用，则从此以后就不需要显式查找表单y表单字段有一个指向其父表单的

form

属性。这意味着一旦您有一个对DOM元素

userName

的字段引用，则

userName.form

将成为表单。如果

$userName

是jQuery对象，则

$userName.get（0）。表单

将为您提供表单

如果您有一个事件，那么它将包含一个

target

属性，该属性将指向触发事件的表单字段，这意味着您可以通过

myEvent.target.form

访问表单

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

登录
多洛金函数（e）{
e=e | | window.event；
e、 预防默认值（）；
var form=e.target.form；
警报（“用户：+form.login.value+”密码：+form.password.value）；
e、 target.form.submit（）；
}

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

---

如果您只需要具有

name

属性的表单元素，则可以筛选表单元素

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

---

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

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

首先，获取所有元素 第二，对他们做点什么 如果您想使用表单，而不是整个页面，可以这样做 ES6版本，具有忽略隐藏字段的优点，如果您想要隐藏字段，则可以使用以下值：

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

---

我可以发誓在表单上曾经有一个方便的

字段

属性，但……一定是我的想象

我之所以这样做（针对

），是因为我通常不希望字段集本身：

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

---

只需获取包含属性

name

let form=document.querySelector（“表单”）；
form.querySelectorAll（“[名称]”）；

---

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

只要没有选择或文本区域；-）您能在一个案例使用应用程序中显示它，并使用它正在获取的多个输入值吗？我更喜欢

document.forms[“form_name”].getElementByClassName（“myClass”）

getElementsByClassName:

document.forms[“form_name”].GetElementsByCassName（“myClass”）

似乎文档.getElementById（“someFormId”）也可以工作。在结尾添加.elements有什么特别的原因吗？@Andrew:我的意图是“someFormId”是

元素的ID，不是一个输入。

元素
是表单元素的属性；它是表单中元素的集合。请参见>好的，我理解什么是。元素。所以如果它没有它也可以工作，我应该使用它吗？可能是添加。元素选择的节点更少，从而获得更好的性能？@安德鲁：如何工作？你可以access表单以名称作为表单的属性输入，但存在以下问题：首先，表单具有可能冲突的其他属性（例如，名为“action”的输入）不会反映为窗体的属性，因为窗体已具有反映其
操作
属性的
操作
属性）。其次，没有简单可靠的方法将输入枚举为表单对象的属性，当然也没有顺序。
元素
除了与输入名称对应的属性外，还具有按文档顺序排列的数字属性。谢谢，我认为您是对的。最好选择with.element。除了
类型之外，它将返回=“图像”
嘿，这里发生了什么？我试图返回id与某个值匹配的值，然后它应该返回该值，该值将中断循环并返回结果。但它没有这样做。@ganeshkaspate不幸的是，无法通过中断或返回来停止slice foreah循环，但是通过抛出并捕获一个异常。找到要查找的元素后，抛出和异常以跳出循环，然后捕获它以避免引起任何错误。请尝试{[].slice.call（theForm）.forEach（函数（el，i）{console.log（el.id）；if（el.id=='e2'
var fields = document['formName'].elements;

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

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

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

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