Форма JavaScript getElementsByTagName ("input") не получает все входные данные в разных div - PullRequest
Новая
       20

Форма JavaScript getElementsByTagName ("input") не получает все входные данные в разных div

0 голосов
/ 10 октября 2019

Я хочу создать форму массового действия, используя флажки ввода. У меня есть HTML-таблица, которая содержит записи, извлеченные из базы данных. Я использую jtable, чтобы восстановить таблицу HTML. Форма находится в заголовке таблицы с единичным флажком ввода для включения всех остальных флажков. Остальные флажки входов находятся в отдельных элементах div внутри тела таблицы, которые имеют тег формы. 

<thead class="thead">
    <tr>
        <th>
            <form id="bulkDelete" name="bulkDelete"
                  action=""
                  method="post">
                <input form="bulkDelete" type="checkbox" name="toggleCheckBoxes" id="toggleCheckBoxes" onclick="toggleAllCheckBoxes(this);">
            </form>
        </th>
    </tr>       
----------
 <tbody>
        @foreach($tracks as $i => $track)
            <tr>
                <td>
                    <input form="bulkDelete" type="checkbox" name="deleteTrack-{!! $track->id !!}">
                </td>
----------
 function toggleAllCheckBoxes(toggleAllCheckBox) {
        var form = toggleAllCheckBox.form;
        var checkAllCheckBox = toggleAllCheckBox.checked;
        console.log(checkAllCheckBox);
        console.log(form);  //shows all inputs
        var checkboxes = form.getElementsByTagName("input");
        console.log(checkboxes); //only has 1 input
        for(var i = 0; i < checkboxes.length; i++) {
            console.log(checkboxes[i]);
        }
    }

При нажатии кнопки toggleCheckBoxes в заголовке таблицы для вызова toggleAllCheckBoxes (this) и console.log (this.form) на консоли отображаются все входные данные из формы, включая входные данные из tbody. Я использую form.getElementsByTagName ("input"), чтобы получить все входные данные из внутренней формы, но он возвращает только входные данные toggleCheckBoxes. Разве getElementsByTagName не работает с элементами, которые находятся в отдельных элементах div? Я закончил добавлять имя класса к входам флажка и использовать document.getElementsByClassName.

1 Ответ

3 голосов
/ 10 октября 2019

Поскольку селектор ищет внутри элемента формы, элементы не находятся в элементе формы. Вы или идете в старую школу с form.elements или используете querySelectorAll 

var inputs = document.querySelectorAll('input[form="bulkDelete"]')
...