小开

最佳答案

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

小开

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

2020年最新情况:

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

小开

如何区分表单? 可以使用不同的 ID，然后使用以下函数:

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

小开

document.getElementById("someFormId").elements;

这个集合还将包含 <select>、 <textarea>和 <button>元素(还有其他人) ，但您可能需要这些元素。

小开

也可以这样使用:

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 存储在一个数组中。这将从第一个表单中获取元素，并将每个值存储到一个唯一变量中。

小开

你们都把注意力集中在问题中的“得到”这个词上。尝试任何表单的’元素’属性，这是一个集合，您可以遍历，即您编写自己的’获取’函数。

例如:

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

希望能帮上忙。

小开

简单表单代码

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

http://jsfiddle.net/rng0hpss/

小开

用这个

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

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

小开

如果在表单或事件中有对任何字段的引用，那么就不需要显式查找表单，因为每个表单字段都有指向其父表单的 form属性(当然，如果有的话)。这意味着一旦您有了对 DOM 元素 userName的字段引用，那么 userName.form就是表单。如果 $userName是一个 jQuery 对象，那么 $userName.get(0).form将提供表单。

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

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

function doLogin(e) {
e = e || window.event;
e.preventDefault();
// e.target is the submit button
var form = e.target.form;


if (form.login.value && form.password.value) {
alert("Submitting form — user:" + form.login.value + " password:" + form.password.value);
form.submit();
} else {
alert('Please fill in the 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>
</body>


</html>

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

小开

如果只需要具有 name属性的表单元素，则可以筛选表单元素。

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

小开

尝试这样获取所有表单字段。

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

ES6版本具有忽略隐藏字段的优点，如果这是您想要的

小开

如果需要这些值，可以使用表格数据:

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

小开

我可以发誓在表格上有一个方便的 fields属性，但是... 一定是我的想象。

我这样做(对于 <form name="my_form"></form>)是因为我通常不想要字段集本身:

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

小开

您可以通过简单地获取包含属性 name的所有元素来进行选择

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


form.querySelectorAll("[name]");

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

小开

不太相关，但是如果你想得到一个对象中的所有表单项，你可以:

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

也就是说

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

小开

const contactForm = new FormData("formLocatorIdIsAdviceableAsTheLocator");

无论上下文(框架或纯 js)如何，上面的内容都很方便:

它返回一个对象，使用表单 input-name 作为键，元素 value 作为值
您可以添加自己的对象: Append (yourKey，yourValye)

得到特定形式的所有元素

首先，得到所有的元素

第二，对他们做点什么

如果希望使用表单，而不是整个页面主体，可以这样做