Javascript 获取特定表单的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4431162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get all the elements of a particular form
提问by manraj82
function getInputElements() {
var inputs = document.getElementsByTagName("input");
}
The above code gets all the inputelements on a page which has more than one form. How do I get the inputelements of a particular form using plain JavaScript?
上面的代码获取input具有多个表单的页面上的所有元素。如何input使用纯 JavaScript获取特定表单的元素？
采纳答案by esvendsen
document.forms["form_name"].getElementsByTagName("input");
回答by Tim Down
document.getElementById("someFormId").elements;
This collection will also contain <select>, <textarea>and <button>elements (among others), but you probably want that.
该集合还将包含<select>,<textarea>和<button>元素（除其他外），但您可能需要这样。
回答by Kasim Muflahi
You're all concentrating on the word 'get' in the question. Try the 'elements' property of any form which is a collection that you can iterate through i.e. you write your own 'get' function.
你们都专注于问题中的“得到”这个词。尝试任何形式的 'elements' 属性，它是一个可以迭代的集合，即您编写自己的 'get' 函数。
Example:
例子：
function getFormElelemets(formName){
var elements = document.forms[formName].elements;
for (i=0; i<elements.length; i++){
some code...
}
}
Hope that helps.
希望有帮助。
回答by Navigatron
It is also possible to use this:
也可以使用这个：
var user_name = document.forms[0].elements[0];
var user_email = document.forms[0].elements[1];
var user_message = document.forms[0].elements[2];
All the elements of forms are stored in an array by Javascript. This takes the elements from the first form and stores each value into a unique variable.
表单的所有元素都通过 Javascript 存储在一个数组中。这从第一种形式中获取元素并将每个值存储到一个唯一的变量中。
回答by epascarello
var inputs = document.getElementById("formId").getElementsByTagName("input");
var inputs = document.forms[1].getElementsByTagName("input");
Update for 2020:
2020 年更新：
var inputs = document.querySelectorAll("#formId input");
回答by Arsalan Sheikh
SIMPLE Form 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="[email protected]"/>
<textarea name="message">Enter Your Message Her</textarea>
</form>
Javascript Code
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/
JSFIDDLE：http: //jsfiddle.net/rng0hpss/
回答by Joshua
Use this
用这个
var theForm = document.forms['formname']
[].slice.call(theForm).forEach(function (el, i) {
console.log(el.value);
});
The el stands for the particular form element. It is better to use this than the foreach loop, as the foreach loop also returns a function as one of the element. However this only returns the DOM elements of the form.
el 代表特定的表单元素。使用它比 foreach 循环更好，因为 foreach 循环还返回一个函数作为元素之一。然而，这只返回表单的 DOM 元素。
回答by ccpizza
If you have a reference to any field in the form or an event then you don't need to explicitly look up the form since every form field has a formattribute that points to its parent form. That means that once you have a filed reference to a DOM element userNamethen userName.formwill be the form. If $userNameis a jQuery object, then $userName.get(0).formwill give you the form.
如果您引用了表单或事件中的任何字段，那么您不需要显式查找表单，因为每个表单字段都有一个form指向其父表单的属性。这意味着一旦你有一个对 DOM 元素的归档引用，userName那么userName.form就会是表单。如果$userName是一个 jQuery 对象，那么$userName.get(0).form会给你表格。
If you have an event then it will contain a targetattribute which will point to the form field that triggered the event, which means you can access the form via myEvent.target.form.
如果您有一个事件，那么它将包含一个target属性，该属性将指向触发该事件的表单字段，这意味着您可以通过myEvent.target.form.
Here is an example without any form lookup code.
这是一个没有任何表单查找代码的示例。
<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);
e.target.form.submit();
}
</script>
</body>
</html>
If you have multiple forms on the page you still don't need to label them by name or id, because you'll always get the correct form instance via the event or via a reference to a field.
如果页面上有多个表单，您仍然不需要按名称或 ID 标记它们，因为您将始终通过事件或通过对字段的引用获得正确的表单实例。
回答by Raphael Rafatpanah
If you only want form elements that have a nameattribute, you can filter the form elements.
如果您只想要具有name属性的表单元素，则可以过滤表单元素。
const form = document.querySelector("your-form")
Array.from(form.elements).filter(e => e.getAttribute("name"))
回答by Shiplu
Try this to get all the form fields.
试试这个以获取所有表单字段。
var fields = document['formName'].elements;
