Edit db record with modal window

问题

I'm trying to edit some database record based on an ID that I'm saving into a button value.

      @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 here, I have an edit button with an id attached. When I click edit I open a modal window to edit the fields and later on submit the form. The thing is, I'm not sure how to get that id from the button into the modal window so I can compare the values and display the correct fields..

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

I was able to pass the button value into the modal using javascript.. I put it into a hidden input but that doesn't help me at all because I can't get the input value in order to compare the values..

回答1:

Solution 1: Using ajax
Step 1: Create a route in laravel which will return a JSON object containing employing data of requested employee. For e.g,

/profile/employment/data/{empl_id}

Will get you employement data of id empl_id.

Step 2: Change your form as below

<form class="app-form" action="/profile/employment/edit/{id}" method="POST">
  <input class="editID" type="hidden" name="editID" value="">
  <div class="form-group">
    <label for="company">Company:</label>
    <input type="text" name="company" value="">
  </div>

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

  <div class="form-group">
    <label for="to">To:</label>
    <input type="date" name="to" value="">
  </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>

Step 3: Use javascript(jQuery) to get the data using ajax and load it into the form in modal.

jQuery code:

$(document).on("click", ".editbtn-modal", function() {
  var id = $(this).val();  
  url = "/profile/employment/data/"+id;
  $.ajax({
    url: url,
    method: "get"    
  }).done(function(response) {
    //Setting input values
    $("input[name='editID']").val(id);
    $("input[name='company']").val(response.company);
    $("input[name='to']").val(response.to);
    $("input[name='from']").val(response.from);

    //Setting submit url
    $("modal-form").attr("action","/profile/employment/edit/"+id)
  });
});

Solution 2: Using remote modal
Step 1: Create another blade file for eg. editEmployee.blade.php and add the above form in it.

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

  {{ csrf_field() }}

  <input class="editID" type="hidden" name="editID" value="{{ $empl->id }}">
  <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>

Step 2: Create a controller which would return the above form as HTML.
Tip: use render() function. example

Step 3: load the form into modal window before showing using javascript(jQuery) considering your modal id is "emp-modal"

$(document).on("click", ".editbtn-modal", function() {
  var id = $(this).val();  
  url = "/profile/employment/data/"+id;
  $('#emp-modal').modal('show').find('.modal-body').load(url);  
});

回答2:

One solution would be to send the details you want the same way you send the id to the modal.

and the proper way to send variables to modal is to include this in the button that opens modal:

data-variablename="{{$your-variable}}"

use this jQuery to get the values of your variables to modal. where edit-empl is the id of your modal and data-target of your button

 $('#edit-empl').on('show.bs.modal',function (e) {
            var variablename= $(e.relatedTarget).data('variablename');

            $(e.currentTarget).find('input[id="yourinputID"]').val(variablename);

来源：https://stackoverflow.com/questions/42415926/edit-db-record-with-modal-window