получить значение foreach l oop из laravel balde и передать его в функцию javascript

Question

У меня есть это For-each l oop в моем Laravel блейд-движке, и я пытаюсь передать идентификатор и имя моей функции Javascript, используя событие нажатия кнопки, и записать его в консоль,

Logi c: прикрепленное изображение в качестве примера (1.) после нажатия кнопки ADD ученик из точки A будет go до точки B (2.) после нажатия кнопки DELETE щелчок студента из точки A будет удален из Точка B и обратно к точке A

Теперь я попробовал записать имя и идентификатор студента в консоль с помощью console.log, но проблема заключается только в идентификаторе Первого ученика выйдет. Пример, если я щелкаю Студента 3 = идентификатор равен 1, он не получает настоящий идентификатор студента. как мне подойти к этому, и что является лучшим предложением для достижения моей цели

КОДОВ

@foreach($students as $std)
        <input id="myInput"  type="button" value="{{$std->name}}" onclick="addRow()">
        @endforeach

function addRow() {
    var inputVal = document.getElementById("myInput").value;
    console.log(inputVal);  
}

Answer 1

Добавить атрибуты данных в ваше поле ввода и получить их по onclick (). Вот документация атрибута данных .

Код с использованием Jquery

@foreach($students as $std)
    <input id="myInput"  type="button" data-name="{{$std->name}}" data-id="{{$std->id}}" value="{{$std->name}}" onclick="addRow(this)">
@endforeach

function addRow(ele) 
{
    var name= $(ele).attr('data-name');
    var id= $(ele).attr('data-id');
    console.log(name);  
    console.log(id);  
}

Answer 2

У вас может быть только один идентификатор на элемент, но у вас может быть несколько классов.

Ваша проблема в том, что вы используете один и тот же идентификатор для всех кнопок. Далее, вы вызываете свой элемент dom внутри функции addRow, который Js не может четко определить, что dom value вы хотите получить. Чтобы решить эту проблему, ваш код должен выглядеть следующим образом.

Pure JS

@foreach($students as $std)
        <input  class="myInput"  type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
@endforeach

function addRow(inputVal) {
    console.log(id);  
}

JQUERY

// html

@foreach($students as $std)
    <input  class="myInput"  type="button" value="{{$std->name}}">
@endforeach



// your script

$('.myInput').click(function() {
     console.log(this.val())
});

Answer 3

Повторные идентификаторы в разметке это проблема. Если идентификаторы вообще не нужны, удалите идентификатор attr и внутреннюю часть функции addRow.

Включите функцию addEventListener

При следующем подходе входные данные выбираются с использованием имени атрибута, а затем связывает событие щелчка.

Как видите, внутри обработчика мы можем получить доступ к значению ввода следующим образом: var inputVal = this.value;

Array.from(document.querySelectorAll("[name='myInput']")).forEach(i => {
  i.addEventListener("click", function(e) {
    var inputVal = this.value;
    console.log(inputVal);  
  });
});

<input name="myInput"  type="button" value="{{$std->name1}}">
<input name="myInput"  type="button" value="{{$std->name2}}">
<input name="myInput"  type="button" value="{{$std->name3}}">

Значение this внутри обработчика является ссылкой на элемент.

Answer 4

1-й удалить идентификатор из l oop ИД должен быть уникальным

2-й, вы можете передать в качестве параметра функции

@foreach($students as $std)
        <input   type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
        @endforeach

function addRow(inputVal) {
    console.log(inputVal);  
}

---

в другом решении, но для этого нужно jQuery

@foreach($students as $std)
        <input   type="button" value="{{$std->name}}" onclick="addRow(this)">
        @endforeach

function addRow() {
    var inputVal  = $(this).value;
    console.log(inputVal);  
}