Собрать массив из инпутов на JS

Question

Есть код:

<body>
  <form>
    <label>
    Введите Ваше имя<br/>
    <input type="text" id="name" size="80px">
    </label><br>
    <label>
    Введите Вашу фамилию<br/>
    <input type="text" id="surname" size="80px">
    </label><br>
    <label>
    Укажите Ваш возраст<br/>
    <input type="text" id="age" size="80px">
    </label><br>
    <div>
      <p>Укажите Ваш пол:</p>
      <label for="male"><input id="male" type="radio" name="sex" value="male" checked>Мужской</label><br>
      <label for="female"><input id="female" type="radio" name="sex" value="female">Женский</label><br>
      <label for="unknown"><input id="unknown" type="radio" name="sex" value="unknown">Не указан</label>
    </div>
    <div>
      <button onclick="getForm()">Отправить данные</button>
      <input type="reset" value="Очистить форму">
    </div>
  </form>
  <script src="jsbasic6_3.js"></script>
</body>

</html>

Нужно чтобы функция getForm() собирала в объект все введенные текстовые значения, значения в checkbox и другое.

На выходе должен быть массив:

{
    "name": "Станислав",
    "surname": "Сивинский",
    "age": "29",
    "sex": {
        "0": {
            "value": "male",
            "status": "checked"
        },
        "1": {
            "value": "female",
            "status": "false"
        },
        "2": {
            "value": "unknown",
            "status": "false"
        }
    }
}

При этом обязательно нужно использовать getElementByTagName. Однако, если тащить через него инпуты, то не получится использовать forEach.

Помогите, пожалуйста.

Answer 1

Обратите внимание, как пишется getElementsByTagName, Elements во множественном числе, у вас в единственном. Этот селектор возвращает HTML-коллекцию. Чтобы перебрать её циклом forEach, эту коллекцию нужно перевести в массив при помощи Array.from(// ваша HTML-коллекция). Дальше уже циклом можно перебрать.

const inputsHTML = document.getElementsByTagName('input') // HTML-collection
const inputsObj = Array.from(inputsHTML) // Превращаем HTML-коллекцию в массив

// Далее перебираем как нужно и формируем новый объект
inputsObj.forEach(function (item, i) {
    console.log(i)
    console.log(item.type)
    console.log(item.id)
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <label>
            Введите Ваше имя<br />
            <input type="text" id="name" size="80px">
        </label><br>
        <label>
            Введите Вашу фамилию<br />
            <input type="text" id="surname" size="80px">
        </label><br>
        <label>
            Укажите Ваш возраст<br />
            <input type="text" id="age" size="80px">
        </label><br>
        <div>
            <p>Укажите Ваш пол:</p>
            <label for="male"><input id="male" type="radio" name="sex" value="male" checked>Мужской</label><br>
            <label for="female"><input id="female" type="radio" name="sex" value="female">Женский</label><br>
            <label for="unknown"><input id="unknown" type="radio" name="sex" value="unknown">Не указан</label>
        </div>
        <div>
            <button onclick="getForm()">Отправить данные</button>
            <input type="reset" value="Очистить форму">
        </div>
    </form>
    <script src="app.js"></script>
</body>

</html>

Заморочился и сделал по-другому. В данном варианте я не учёл проверку полей формы на заполненность. Так же функция перестанет работать, если изменится порядок инпутов в вёрстке. Для предотвращения этого я бы сделал дополнительные проверки. Но, если вы уверены, что вёрстка случайно не изменится, то можно оставить и так.

const submitBtn = document.querySelector('#submitBtn')

// Вешаем прослушку на сабмит формы
submitBtn.addEventListener('click', (e) => {
    e.preventDefault() // Отменяем перезагрузку страницы
    getForm() // Получаем данные из формы в виде объекта
})


function getForm() {
    const inputsHTML = document.getElementsByTagName('input') // HTML-collection
    const inputsObj = Array.from(inputsHTML) // Превращаем HTML-коллекцию в массив
    const userData = {
        name: inputsObj[0].value,
        surname: inputsObj[1].value,
        age: inputsObj[2].value,
        sex: {
            0: {
                value: inputsObj[3].value,
                status: inputsObj[3].checked ? 'checked' : 'false'
            },
            1: {
                value: inputsObj[4].value,
                status: inputsObj[4].checked ? 'checked' : 'false'
            },
            2: {
                value: inputsObj[5].value,
                status: inputsObj[5].checked ? 'checked' : 'false'
            }
        }
    }

    console.log(userData) // Это для проверки

    return userData // Здесь ваш массив
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form name="userDataForm">
        <label>
            Введите Ваше имя<br />
            <input type="text" id="name" size="80px">
        </label><br>
        <label>
            Введите Вашу фамилию<br />
            <input type="text" id="surname" size="80px">
        </label><br>
        <label>
            Укажите Ваш возраст<br />
            <input type="text" id="age" size="80px">
        </label><br>
        <div>
            <p>Укажите Ваш пол:</p>
            <label for="male"><input id="male" type="radio" name="sex" value="male" checked>Мужской</label><br>
            <label for="female"><input id="female" type="radio" name="sex" value="female">Женский</label><br>
            <label for="unknown"><input id="unknown" type="radio" name="sex" value="unknown">Не указан</label>
        </div>
        <div>
            <!-- <button onclick="getForm()">Отправить данные</button> // так лучше не делать -->
            <button id="submitBtn">Отправить данные</button> <!-- Убираем onclick и добавляем id -->
            <input type="reset" value="Очистить форму">
        </div>
    </form>
    <script src="app.js"></script>
</body>

</html>

БЛОГ НА HUSL

Собрать массив из инпутов на JS

Ответы (1 шт):