function getInputElements() {
var inputs = document.getElementsByTagName("input");
}
Приведенный выше код получает все элементы input на странице, которая имеет более одной формы. Как получить элементы input определенной формы, используя простой JavaScript?
document.forms["form_name"].getElementsByTagName("input");
document.getElementById("someFormId").elements;
Эта коллекция также будет содержать элементы <select>, <textarea> и <button> (среди других), но вы, вероятно, этого хотите.
Вы все концентрируетесь на слове "получить" в вопросе. Попробуйте свойство "elements" любой формы, которая представляет собой коллекцию, которую вы можете перебирать, т.е. Вы пишете свою собственную функцию "get".
Пример:
function getFormElelemets(formName){
var elements = document.forms[formName].elements;
for (i=0; i<elements.length; i++){
some code...
}
}
Надеюсь, что это поможет.
Также можно использовать это:
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. Это берет элементы из первой формы и сохраняет каждое значение в уникальную переменную.
ПРОСТОЙ код формы
<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
//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/
var inputs = document.getElementById("formId").getElementsByTagName("input");
var inputs = document.forms[1].getElementsByTagName("input");
Используйте этот
var theForm = document.forms['formname']
[].slice.call(theForm).forEach(function (el, i) {
console.log(el.value);
});
Элемент el обозначает конкретный элемент формы. Лучше использовать это, чем цикл foreach, поскольку цикл foreach также возвращает функцию как один из элементов. Однако это возвращает только элементы DOM формы.
Если вам нужны только элементы формы, имеющие атрибут name, вы можете отфильтровать элементы формы.
const form = document.querySelector("your-form")
Array.from(form.elements).filter(e => e.getAttribute("name"))
Если у вас есть ссылка на любое поле в форме или событии, вам не нужно явно искать форму, поскольку каждое поле формы имеет атрибут 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>
Если на странице есть несколько форм, вам по-прежнему не нужно указывать их по имени или идентификатору, потому что вы всегда получите правильный экземпляр формы через событие или ссылку на поле.
Попробуйте это, чтобы получить все поля формы.
var fields = document['formName'].elements;
Как бы вы хотели различать формы? Вы можете использовать разные идентификаторы, а затем использовать эту функцию:
function getInputElements(formId) {
var form = document.getElementById(formId);
if (form === null) {
return null;
}
return form.getElementsByTagName('input');
}
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);