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

Question

[lev89]

Не знаю как правильно сформулировать заголовок темы. В общем суть такова:
у меня есть форма, в нем кнопка, которая открывает модальное окно, в этой модалке имеются категории в виде списка. Мне нужно, чтобы при выборе категории, его значение (id) подставилось в форму:
Форма:

<div class="form-group">
	<label for="parent_id">Родительская категория</label>
	<button type="button" class="btn btn-warning btn-sm"  data-toggle="modal" data-target=".model-parent">Выбрать категорию</button>
	<input type="hidden" name="parent_id" value=""> <!--Сюда нужно подставить id категории из модалки-->
</div>

Модалка

<div class="modal fade model-parent" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">Выбрать категорию</h4>
            </div>
            <div class="modal-body">
                <ul>
                    @foreach ($categories as $category)
                        <li><a id="{{ $category->id }}">{{ $category->name }}</a></li>
                       
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

Никогда такое раньше не реализовывал, подскажите решение

Comments

[lev89]

надо как-то передать значение id в input средствами JS.

<li><a id="{{ $category->id }}">{{ $category->name }}</a></li>

как это сделать?

[Ольга]

Как вариант создать обработчик,который будет регистрироваться в момент открытия модального окна (либо вешать на событие открытия,либо разместить в самой модалке).
в итоге скрипт будет выглядеть как-то так:

let elements = document.querySelectorAll('.modal-body li a');//делаем выборку строк,на которых нужна обработка клика
elements.onclick = function() { //вешаем обработчик
    let id=this.id; //забираем id
    let inp=document.querySelectorAll('.form-group [name="parent_id"]'); //находим инпут
    inp.value=id; //втавляем id  в значение инпута
};

есть пара замечаний по верстке:

• использовать тег <a> не для ссылок - плохая практика, теги нужно использовать по назначению
  
• для верстки и скриптов лучше использовать классы либо id, привязка тегам в обоих случаях ведет к проблемам в будущем.
  
• для хранения данных(в данном случае id) лучше использовать атрибуты data, которые были придуманы как раз для этого
  

[Алан Гибизов]

Ольга, рекомендую перенести коммент в ответы.

[Ольга]

Алан Гибизов, готово)

[lev89]

TheAndrey7, select не устраивает, так как категории могут быть многоуровневые

[lev89]

Ольга, извините, что я охренею в край, но можно еще кроме id из модалки забирать еще название категории и вставить например сюда <span id="cat-name"></span>

[Ольга]

lev89, это вопрос? содержимое тега можно забрать 2мя способами:

let text=this.textContent;//забираем только текст
let html=this..innerHTML;//забираем HTML содержимое

Собственно запись внутрь идет по аналогии
подробнее читаем тут https://learn.javascript.ru/basic-dom-node-properties

Answer 1

[Ольга]

Как вариант создать обработчик,который будет регистрироваться в момент открытия модального окна (либо вешать на событие открытия,либо разместить в самой модалке).
в итоге скрипт будет выглядеть как-то так:

let elements = document.querySelectorAll('.modal-body li a');//делаем выборку строк,на которых нужна обработка клика
elements.onclick = function() { //вешаем обработчик
    let id=this.id; //забираем id
    let inp=document.querySelectorAll('.form-group [name="parent_id"]'); //находим инпут
    inp.value=id; //втавляем id  в значение инпута
};

есть пара замечаний по верстке:

• использовать тег <a> не для ссылок - плохая практика, теги нужно использовать по назначению
  
• для верстки и скриптов лучше использовать классы либо id, привязка тегам в обоих случаях ведет к проблемам в будущем.
  
• для хранения данных(в данном случае id) лучше использовать атрибуты data, которые были придуманы как раз для этого
  

Comments

[ThunderCat]

тег <a> и другие хтмл теги в ответе нужно оформлять соответствующим инструментом кода, иначе будет поломанная разметка (как получилось у вас). В остальном все в принципе правильно, единственно еще как вариант можно навесить обработчик на документ и работать через делегирование, что выглядит логичнее.

[Ольга]

ThunderCat, поправила, спасибо

[Ольга]

TheAndrey7, querySelectorAll - вполне себе волшебные селектор. Чистый JS уже давно не на столько уныл : https://learn.javascript.ru/searching-elements-dom...

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

let elements = document.querySelectorAll('.modal-body li a');//делаем выборку строк,на которых нужна обработка клика
for(var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click",function(){//вешаем обработчик
    let id=this.id; //забираем id
    let inp=document.querySelectorAll('.form-group [name="parent_id"]'); //находим инпут
    inp[0].value=id; //втавляем id  в значение инпута
  });
}

[lev89]

Ольга, доброе утро, данное решение мне подходит, спасибо вам большое