从 laravel balde 获取 foreach 循环的值并将其传递给 javascript 函数

Question

i have this For-each loop in my Laravel blade engine and i'm trying to pass the id and name to my Javascript function using button click event and log it to console,

Logic: attached image as example (1.) once button ADD is click the Student from Point A will go to Point B (2.) once button DELETE click the student from Point A will be remove from Point B and back to Point A

Now what i have tried so far is logging the student name and id to the console using console.log, but problem is only the ID of the First student will come out. Example if i Click Student 3 = the id is 1 it is not getting the real ID of the student. how do i approach this and what is the best suggestion to achieve my goal

CODES

@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

Add data attributes to you input field and get them on onclick(). Here is data attribute documentation .

Code using 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

1st remove id from loop id must be unique

2nd you can pass as function parameter

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

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

---

on more solution but it need jQuery

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

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

Answer 3

Repeated Ids in the markup is the problem. If the Ids are no needed at all, remove the attr Id and inside of the function addRow.

Embrace the function addEventListener

The following approach selects the inputs using the attribute name and then binds a click event.

As you can see, inside of the handler, we can access the value of the input as follow: 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}}">

The value of this inside the handler is a reference to the element.

Answer 4

You can only have one ID per element, but you can indeed have more than one class.

Your problem is that you are using the same Id for all of your button. Next, is you are calling your dom element inside of your addRow function which Js can't find clearly if what dom value you want to get. To solve this your code should look like this.

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())
});