перевести ключ php в javascript для регистрации

Question

У меня есть цикл php, который правильно отображает ожидаемые значения в виде заголовков HTML.

Здесь я хочу создать скрытый вход для каждого, поэтому, если для категорий есть 15 тегов, я хочу 15 скрытых входов.

Приведенный ниже код «работает», регистрируя правильную информацию, однако он регистрирует только первый.

Очевидно, это связано с тем, что циклу php / html назначен ключ, но JavaScript извлекает неуникальный идентификатор.

Как я могу правильно перевести этот ключ в javascript, чтобы я мог записать фактическое значение выбранного элемента, а не только первый?

@foreach($items as $key => $item)

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category" id="edit_category" value="{{$item->category}}" />

@endforeach



function editCommentModal(){

console.log(document.getElementById("edit_category").value);

}

UPDATE:

код с модальным и span, содержащим событие onclick

@foreach($items as $key => $item)

<!-- display category and button -->
<h3 class="uk-width-4-10">{{$item->category}}</h3>
<a href="#edit-modal{{ $key }}" data-uk-modal><span onclick="editCommentModal()" class="uk-icon-plus-square"></span></a>


<!-- modal -->
<div id="edit-modal{{ $key }}" class="uk-modal edit-modal">

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category[]" id="edit_category" value="{{$item->category}}" />

</div>

@endforeach


function editCommentModal(){
 var inps = document.getElementsByName('edit_category[]');
 for (var i = 0; i <inps.length; i++) {
    var inp=inps[i];
    console.log("edit_category["+i+"].value="+inp.value);
 }
}

Answer 1

@foreach($items as $key => $item)

<!-- display category and button -->
<h3 class="uk-width-4-10">{{$item->category}}</h3>
<a href="#edit-modal{{ $key }}" data-uk-modal><span onclick="editCommentModal({{ $key }})" class="uk-icon-plus-square"></span></a>


<!-- modal -->
<div id="edit-modal{{ $key }}" class="uk-modal edit-modal">

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category[]" id="{{ 'edit_category_' . $item->id }}" value="{{$item->category}}" />

</div>

@endforeach


function editCommentModal(id){
 var inps = document.getElementsByName('edit_category[]');
 for (var i = 0; i <inps.length; i++) {
    var inp=inps[i];
    if('edit_category_' + id == inp.id)
    {
      console.log("edit_category["+i+"].value="+inp.value);
    }
 }
}    

Answer 2

Сначала; Идентификаторы должны быть уникальными, поэтому я бы предложил вам сменить идентификатор на класс. Чтобы получить все значения, вы можете изменить имя edit_category на массив ввода edit_category[]. Если вы хотите добавить больше скрытых полей ввода, вы можете использовать индекс, который вы получаете в цикле!

@foreach($items as $key => $item)
   <h3 class="uk-width-4-10">{{$item->category}}</h3>
   <input type="hidden" name="edit_category[]" class="edit_category" value="{{$item->category}}" />
@endforeach

function editCommentModal(){
    var all_categories = document.getElementsByName('edit_category[]');
    var all_names = document.getElementsByName('edit_names[]');
    for (var i = 0; i <all_categories.length; i++) {
        var category=all_categories[i];
        var name=all_names[i];
        console.log("edit_category["+i+"].value="+category.value);
        console.log("edit_names["+i+"].value="+name.value);
    }
}

Answer 3

Используйте класс вместо идентификатора, и тогда вы сможете найти их всех по классам и делать с ними все, что захотите.

<input type="hidden" name="edit_category" class="edit_category" value="{{$item->category}}" />

document.getElementsByClassName('edit_category')

var categories = document.getElementsByClassName('edit_category');

Array.prototype.forEach.call(categories, function(category){
  console.log(category.value);
});

    <input type="hidden" name="edit_category" class="edit_category" value="a" />
    <input type="hidden" name="edit_category" class="edit_category" value="b" />
    <input type="hidden" name="edit_category" class="edit_category" value="c" />