How to create javascript function in laravel foreach loop

Question

I need some help about this code

I have some code in blade view

@foreach($cart as $ct)
<button type="button" id="edit{{$ct->id}}" class="btn-btn-delete">
        <i class="mr-1 fas fa-edit"></i>Edit
</button>
        //when I {{$ct->id}} at this point, it return id of current product         
<div class="form-popup" id="myForm{{$ct->id}}">
        //however, when I {{$ct->id}} at this point, it return id of the last product                      
    <form action="{{route('cart.update',$ct->id)}}" class="form-container" method="post">
            @csrf
            @method('patch')
           <h1>Edit information</h1>

           <input type="text" name="name" value="{{$ct->name}}">
          <button type="submit" class="btn">change</button>
          <button type="button" class="btn cancel" id="close{{$ct->id}}">Close</button>
     </form>
</div>

 <script>
     var ID = {{$ct->id}};
     var code = 'edit'+ID;
     var end = 'close'+ID;
     var form = 'myForm'+ID;
     document.getElementById(code).addEventListener("click",function(){
               document.getElementById(form).style.display = "block";
              });
     document.getElementById(end).addEventListener("click",function(){
               document.getElementById(form).style.display = "none";
              });
 </script>
@endforeach

when I run my code and click on Edit button the expected value in input field of each row must be different. However, it all gets the value of the last column in the database.

How I can fix it?

Not the only issue but you can't repeat element ID's in a page. They are unique by definition. Learning how to use more modern addEventListener instead of inline onclick would also be helpful — charlietfl
– charlietfl, Commented Nov 3, 2019 at 13:53
@charlietfl I just try to update my code as you said, however, it still does not work — Tùng Nguyễn
– Tùng Nguyễn, Commented Nov 3, 2019 at 15:49
You shouldn't merge JS and PHP together, have separate files. — Thanh Trung
– Thanh Trung, Commented Nov 3, 2019 at 15:52
@ThanhTrung If I don't do that how I can get the element id for each my data row? — Tùng Nguyễn
– Tùng Nguyễn, Commented Nov 3, 2019 at 16:04
Current approach still requires the js being mixed in the php but you can fix the current code by quoting the ID variable string. var ID = "{{$ct->id}}"; so it is a valid string value in javascript — charlietfl
– charlietfl, Commented Nov 3, 2019 at 16:07

charlietfl · Accepted Answer · 2019-11-03 17:37:01Z

Following is approach using addEventListener() and classes to target elements as well as data attributes (like data-target="myForm1") for element specific data to use inside an event handler.

It is currently working for the "Edit" and "Cancel" buttons which have the same class popup-toggle along with their other existing classes.

You can use this approach as a template for your other elements/actions

// in DOMContentLoaded event handler or after elements exist

const popToggleButtons = document.querySelectorAll('.popup-toggle');

[].slice.call(popToggleButtons).forEach(function(btn) {
  btn.addEventListener('click', handleToggleBtnClick)
});


function handleToggleBtnClick(event) {
  const btnData = this.dataset,
    popup = document.getElementById(btnData.target),
    classMethod = btnData.action === 'show' ? 'add' : 'remove';
  // add or remove active class depending on which button was clicked
  popup.classList[classMethod]('active');

}

.form-popup {
  display: none
}

.form-popup.active {
  display: block
}

<div>
  <button type="button" data-target="myForm1" data-action="show" class="popup-toggle btn-btn-delete">
        <i class="mr-1 fas fa-edit"></i>Edit #1
</button>
  <div class="form-popup" id="myForm1">
    <form action="..." class="form-container" method="post">
      <h1>Edit information #1</h1>
      <input type="text" name="name" value="name 1">
      <button type="submit" class="btn">change</button>
      <button type="button" class="btn cancel popup-toggle" data-target="myForm1" data-action="hide">Close</button>
    </form>
  </div>
</div>
<div>
  <button type="button" data-target="myForm2" data-action="show" class="popup-toggle">
        <i class="mr-1 fas fa-edit"></i>Edit #2
</button>

  <div class="form-popup" id="myForm2">
    <form action="..." class="form-container" method="post">
      <h1>Edit information #2</h1>
      <input type="text" name="name" value="name 2">
      <button type="submit" class="btn">change</button>
      <button type="button" class="btn cancel popup-toggle" data-target="myForm2" data-action="hide">Close</button>
    </form>
  </div>
</div>

Collectives™ on Stack Overflow

How to create javascript function in laravel foreach loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related