Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Methmi's avatar

Pass data to modal using jquery

I need to do my edit function in the modal pop-up.

This is the button that makes modal pop-up

<a href="" id="{{ $c->id }}" type="button" data-target="#exampleModal" data-toggle="modal" class="btn btn-info btn-sm"><i class="fas fa-edit"></i></a>

This is the jquery for that

 <script type="text/javascript">
          
         $('#exampleModal').on('shown.bs.modal', function () {
        $('#myInput').trigger('focus')
      })

  </script>

It gives the error Property [id] does not exist on this collection instance. I think the problem is with my jquery. How can I pass the projectmachine ID to the edit form using the jquery

This is the form tag and that is why it gives the error ```

``` For this, I need to pass id before. How can I pass it
0 likes
6 replies
frankielee's avatar

If you removed id="{{ $c->id }}", the error still exists?

chr15k's avatar

Property [id] does not exist on this collection instance is an Exception thrown from Laravel framework as you're trying to access the Property id from the Collection instance ($c).

I'm not sure on the full context, but you can iterate over the collection instance like this:

@foreach ($c as $object)
    {{ $object->id }}
@endforeach

Or get the first object from the collection:

{{ $c->first() }}
Methmi's avatar

It comes because of this action

  <form role="form" method="POST" action="{{ route('dashboard.projectmachines.update', $projectmachines->id)}}">

for this action, I should pass the id in the click event. I do not know how to da that

Methmi's avatar

I have done it already

 <tbody>
                        @foreach($mname as $d)
                        @foreach($projectmachines as $c)
                        <tr>
                          <td>{{ $c->pm_date }}</td>
                          <td>{{ $d->m_type }}</td>
                          <td>{{ $c->pm_duration }} months</td>
                          <td>{{ $c->pm_location }}</td>
                          <td>{{ $c->pm_mincharge }} hrs</td>
                          <td>{{ $c->pm_rental }}</td>
                          <td>

                                                        
                        <div class="btn-group btn-group-sm">

                        <a href="" id="{{ $c->id }}" type="button" data-target="#exampleModal" data-toggle="modal" class="btn btn-info btn-sm"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
                      </div>

                          </td>
                        </tr>
                        @endforeach
                        @break
                        @endforeach 
                        </tbody>

the problem is in

<form role="form" method="POST" action="{{ route('dashboard.projectmachines.update', $projectmachines->id)}}">

For this, it is needed to pass the id before.So how can I do that

frankielee's avatar

The form is embedded inside of modal? If yes, leave the action empty first, action=""

  1. add data-attribute to your button Example
<a data-id="{{$c->id}}" data-action="{{ route('dashboard.projectmachines.update', $c->id)}}">
  1. Pass the value to modal after clicking with Jquery Example
   jQuery(document).ready(function() {

$('#modal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // var uri =
            var modal = $(this)
            modal.find('form').attr('action',button.data('action'));
        })
}
1 like

Please or to participate in this conversation.