Получить все элементы определенной формы

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

Приведенный выше код получает все элементы input на странице, которая имеет более одной формы. Как получить элементы input определенной формы, используя простой JavaScript?

Ответ 1

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

Ответ 2

document.getElementById("someFormId").elements;

Эта коллекция также будет содержать элементы <select>, <textarea> и <button> (среди других), но вы, вероятно, этого хотите.

Ответ 3

Вы все концентрируетесь на слове "получить" в вопросе. Попробуйте свойство "elements" любой формы, которая представляет собой коллекцию, которую вы можете перебирать, т.е. Вы пишете свою собственную функцию "get".

Пример:

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

Надеюсь, что это поможет.

Ответ 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. Это берет элементы из первой формы и сохраняет каждое значение в уникальную переменную.

Ответ 5

ПРОСТОЙ код формы

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

Ответ 6

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

Ответ 7

Используйте этот

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

Элемент el обозначает конкретный элемент формы. Лучше использовать это, чем цикл foreach, поскольку цикл foreach также возвращает функцию как один из элементов. Однако это возвращает только элементы DOM формы.

Ответ 8

Если вам нужны только элементы формы, имеющие атрибут name, вы можете отфильтровать элементы формы.

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

Ответ 9

Если у вас есть ссылка на любое поле в форме или событии, вам не нужно явно искать форму, поскольку каждое поле формы имеет атрибут 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>

Если на странице есть несколько форм, вам по-прежнему не нужно указывать их по имени или идентификатору, потому что вы всегда получите правильный экземпляр формы через событие или ссылку на поле.

Ответ 10

Попробуйте это, чтобы получить все поля формы.

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

Ответ 11

Как бы вы хотели различать формы? Вы можете использовать разные идентификаторы, а затем использовать эту функцию:

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

Ответ 12

Сначала получите все элементы

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