Как правильно организовать взаимодействия инпутов и радио/чекбоксов в форме?

Question

Есть форма внутри которой расположены пары - обычный инпут и динамически, либо радио, либо чекбокс, справа от инпута. Пары также создаются и динамически отрисовываются самим пользователем, т.е. изначально неизвестно их количество. Данные нужно отправлять на сервер. Поле name у всех видов инпутов задаётся в виде массива, т.е. для текстовых как: name="name[]" А для радио/чекбоксов условный name="correct[]"

Обрабатываю запрос на стороне сервера, приходит в реквесте массив name - всё ок. Однако с радиокнопками приходит массив из одного значения - "on". И что мне с ним спрашивается делать? Как привязать к нужному элементу name в массиве? Приходили бы все значения и on и off я бы сравнивал по индексу.

Update: Пары на странице:

<div class="answers" id="answers">
   <div class="mb-4 row">
      <div class="group col"><label for="name" class="form-label">Название ответа</label><input type="text" class="form-control" id="name" name="name[]"></div>
      <input class="col input inp-type" name="correct[]" value="off" type="radio">
   </div>
   <div class="mb-4 row">
      <div class="group col"><label for="name" class="form-label">Название ответа</label><input type="text" class="form-control" id="name" name="name[]"></div>
      <input class="col input inp-type" name="correct[]" value="off" type="radio">
   </div>
   <div class="mb-4 row">
      <div class="group col"><label for="name" class="form-label">Название ответа</label><input type="text" class="form-control" id="name" name="name[]"></div>
      <input class="col input inp-type" name="correct[]" value="off" type="radio">
   </div>
</div>

Запрос:

Answer 1

Можно самому сформировать нужные данные для сервера...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
document.addEventListener('DOMContentLoaded', _ => {
    document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault()
        let data = [...this.querySelectorAll('.mb-4')].reduce((a, o) => {
            const name = o.querySelector('[name="name[]"]').value
            const correct = o.querySelector('[name="correct[]"]').checked
            return [...a, {name, correct}]
        }, [])
        // это уже можно отправлять
        console.log(data)
        // или это
        data = JSON.stringify(data)
        console.log(data)
    })
})
</script>
</head>
<body>
<form>
    <button>Test</button>
    <div class="answers" id="answers">
        <div class="mb-4 row">
            <div class="group col">
                <label for="name" class="form-label">Название ответа</label>
                <input type="text" class="form-control" id="name" name="name[]">
            </div>
            <input class="col input inp-type" name="correct[]" value="off" type="radio">
        </div>
        <div class="mb-4 row">
            <div class="group col">
                <label for="name" class="form-label">Название ответа</label>
                <input type="text" class="form-control" id="name" name="name[]">
            </div>
            <input class="col input inp-type" name="correct[]" value="off" type="radio">
        </div>
        <div class="mb-4 row">
            <div class="group col">
                <label for="name" class="form-label">Название ответа</label>
                <input type="text" class="form-control" id="name" name="name[]">
            </div>
            <input class="col input inp-type" name="correct[]" value="off" type="radio">
        </div>
    </div>
</form>

</body>
</html>

БЛОГ НА HUSL

Как правильно организовать взаимодействия инпутов и радио/чекбоксов в форме?

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