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

ovidiu12's avatar

Edit using Modal Window

Hey everyone! Following Jeffrey's Laravel From Scratch course I was able to learn a lot of laravel (thanks). However, at this moment, I'm stuck with this problem.

So I have this Employment History on the user profile. I was able to set up the creating part so the users can add employment history. I'm doing this using a modal window. Now, I would like to let users edit (and delete probably) what they entered so I have an edit button which leads to a modal window.

Here's how I display the records from the database.

      @foreach ($employment as $empl)
        <button data-toggle="modal" data-target="#edit-empl" href="#edit-empl" class="btn btn-default editbtn-modal" value="{{ $empl->id }}" type="button" name="editbtn">Edit</button>
        <h3 class="profile-subtitle">{{ $empl->company }}</h3>
        <p class="profile-text subtitle-desc">{{ $empl->parseDate($empl->from) }} - {{ $empl->parseDate($empl->to) }}</p>
      @endforeach 

As you can see, I have this button with a value of $empl->id. I did this to get the employment id from the db. When I click the edit button I open this modal window:

<form class="app-form" action="/profile/employment/edit/{id}" method="POST">

  {{ csrf_field() }}

  <input class="editID" type="hidden" name="editID" value="">

  @foreach ($employment as $empl)
    @if ($empl->id == buttonidhere)
      <div class="form-group">
        <label for="company">Company:</label>
        <input type="text" name="company" value="{{ $empl->company }}">
      </div>

      <div class="form-group">
        <label for="month">From:</label>
        <input type="date" name="from" value="{{ $empl->from }}">
      </div>

      <div class="form-group">
        <label for="to">To:</label>
        <input type="date" name="to" value="{{ $empl->to }}">
      </div>
    @endif
  @endforeach

  <div class="row">
    <div class="col-sm-6">
      <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
    </div>
  </div>
</form>

As you can see, in this modal I have a foreach to go through the records and I wanted to check if the $empl->id matches the value from the button id I've clicked.. And this is where I'm stuck.. I don't know how to make this verification, how to get that button value so I can perform the if statement and get the record with the corresponding id.

PS: I tried passing the value (using jquery) to this hidden input, which worked but didn't helped me at all because I can't take the input value without submitting the form.. I guess it works for the updating method in the controller but right now I'm focused on displaying the correct record based on id..

Can you guys help? I'm stuck on this for hours haha..

0 likes
11 replies
ovidiu12's avatar

That's nothing.. I just wanted to represent the place where I need the id from the button that launches the modal.

lmxdev's avatar

i don't understand what your problem is, you are trying to make a modal to update the employments, that seems quite straight forward

ovidiu12's avatar

Yes, but what I wanted is to get just one record.. in that edit modal, I want to display (and edit) only the record with the id of 1 for example.. As it is right now, I'm getting all records and editing them all at once because I don't know how to edit just one.. I hope it's clear..

lmxdev's avatar
lmxdev
Best Answer
Level 5

well you have to declare your modal inside of a foreach loop, you see

that way you will have as many modals and forms with the correct id for that object

@foreach($employment as $empl)
<form class="app-form" action="/profile/employment/edit/$empl->id" method="POST">

  {{ csrf_field() }}

  <input class="editID" type="hidden" name="editID" value="">

      <div class="form-group">
        <label for="company">Company:</label>
        <input type="text" name="company" value="{{ $empl->company }}">
      </div>

      <div class="form-group">
        <label for="month">From:</label>
        <input type="date" name="from" value="{{ $empl->from }}">
      </div>

      <div class="form-group">
        <label for="to">To:</label>
        <input type="date" name="to" value="{{ $empl->to }}">
      </div>
    
  <div class="row">
    <div class="col-sm-6">
      <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
    </div>
  </div>
</form>
@endforeach
1 like
BarbaraTackaBa's avatar

I have with modal window (on edit). It won't show/open. Here is my code.

directory.blade.php

 <tbody class="text-center">
                                <?php $i=1; ?>
                                @foreach($directories as $item)
                                <tr>
                                    <td scope="row">{{ $i }}</td>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->surname }}</td>
                                    <td>{{ $item->email }}</td>
                                    <td>{{ $item->phone }}</td>
                                    <td>{{ $item->town }}</td>
                                    <td>{{ $item->country }}</td>
                                    <td>{{ $item->gender }}</td>
                                    <td>{{ $item->status }}</td>
                                    <td><a href="#editDirectory/{{ $item->id}}" data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
                                    <td><a href="#deleteDirectory{{ $item->id}}" data-toggle="modal" class="text-center"><img src="{{ asset('storage/admin/delete.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
                                 <?php $i++; ?>
                                </tr>
                                @endforeach 
 </tbody>

modal

                <div class="modal fade bd-example-modal-md" id="editDirectory" tabindex="-1" role="dialog" aria-labelledby="editDirectoryModalLabel" aria-hidden="true" data-backdrop="false">
                  <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">

                    {!! Form::open (['method' => 'POST', 'action' => ['DirectoriesController@update',$directories->id]]) !!}
                    {!! csrf_field() !!}

                      <div class="modal-header">
                        <h5 class="modal-title" id="editDirectoryModalLabel">Ažuriranje novog korisnika</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        @include('pages.admin.forms-admin.edit.edit-directory')
                      </div>
                    {!! Form::hidden('_method','PUT')!!}
                    {!! Form::close() !!}
                    </div>
                  </div>
                </div>
Snapey's avatar

@BarbaraTackaBa start a new question

If the modal is not appearing check the javascript console for errors.

BarbaraTackaBa's avatar

It doesn't show error in console. That is wierd. When I go with mouse on that button it shows (on left down side of screen) correct id. But when I click on it, it just won't open.

Snapey's avatar

I think its the fact that you are appending the model id to the name of the modal. therefore there is no match.

The id needs to be passed to the modal as a data attribute I think

shez1983's avatar

so wait on one page you are creating x amount of forms so that when a user (admin i think) clicks on edit you open the form related to that user?

that seems a bit crazy.. you ideally should get that data on ajax so you dont load x amount of data when an admin may not even do edit.

BarbaraTackaBa's avatar

Hm.. I don't understand you. I try to make normal edit. I don't want to create x amount of forms. I just want make edit by user id.

Please or to participate in this conversation.