Creating an edit modal in Laravel 5

Question

I am trying to create an edit modal for each row in the database. My page looks like this.

When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.

The modal I intend to show is like this.

My view.php

<div class="box-body">
  <table id="example2" class="table table-bordered table-hover">
    <thead>
      <tr>
        <!-- <th></th> -->
        <th>Username</th>
        <th>Contact</th>
        <th>Email</th>
        <th>Role Type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($data as $datas)
        <tr>
          <td>{{ $datas->username }}</td>
          <td>{{ $datas->contact }}</td>
          <td>{{ $datas->email }}</td>
          <td>Role Type</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
                <i class="fa fa-edit"></I>
              </button>
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
</div>

<div class="modal fade" id="edit-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" align="center"><b>Edit User</b></h4>
      </div>
      <div class="modal-body">
        <form role="form" action="/edit_user">
          <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
          <div class="box-body">
            <div class="form-group">
              <label for="exampleInputEmail1">User ID</label> 
              <input type="text" class="form-control" name="user_id" placeholder="User ID" >
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Username</label> 
              <input type="text" class="form-control" name="username" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Email</label> 
              <input type="text" class="form-control" name="email" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Contact</label> 
              <input type="text" class="form-control" name="contact" placeholder="Enter contact">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Change Password</label> 
              <input type="password" class="form-control" name="change_password" placeholder="Enter password">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

How can I achieve the desired output?

Answer 1

Something like this would suffice.

Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs

$(document).ready(function() {
  /**
   * for showing edit item popup
   */

  $(document).on('click', "#edit-item", function() {
    $(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.

    var options = {
      'backdrop': 'static'
    };
    $('#edit-modal').modal(options)
  })

  // on modal show
  $('#edit-modal').on('show.bs.modal', function() {
    var el = $(".edit-item-trigger-clicked"); // See how its usefull right here? 
    var row = el.closest(".data-row");

    // get the data
    var id = el.data('item-id');
    var name = row.children(".name").text();
    var description = row.children(".description").text();

    // fill the data in the input fields
    $("#modal-input-id").val(id);
    $("#modal-input-name").val(name);
    $("#modal-input-description").val(description);

  })

  // on modal hide
  $('#edit-modal').on('hide.bs.modal', function() {
    $('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
    $("#edit-form").trigger("reset");
  })
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="main-container container-fluid">
  <!-- heading -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1 class="text-primary mr-auto">Example list</h1>
      </div>
    </div>
  </div>
  <!-- /heading -->
  <!-- table -->
  <table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th> Name</th>
        <th> Description</th>
        <th> Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="data-row">
        <td class="align-middle iteration">1</td>
        <td class="align-middle name">Name 1</td>
        <td class="align-middle word-break description">Description 1</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
        </td>
      </tr>
      <tr class="data-row">
        <td class="align-middle iteration">2</td>
        <td class="align-middle name">Name 2</td>
        <td class="align-middle word-break description">Description 2</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="attachment-body-content">
        <form id="edit-form" class="form-horizontal" method="POST" action="">
          <div class="card text-white bg-dark mb-0">
            <div class="card-header">
              <h2 class="m-0">Edit</h2>
            </div>
            <div class="card-body">
              <!-- id -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
                <input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
              </div>
              <!-- /id -->
              <!-- name -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-name">Name</label>
                <input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
              </div>
              <!-- /name -->
              <!-- description -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-description">Email</label>
                <input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
              </div>
              <!-- /description -->
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /Attachment Modal -->

---

Suggestion

I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.