javascript - 在 Bootstrap 模式内的 Laravel 中表单提交

Question

我想在 laravel 中提交一个表单，该表单位于 bootstrap 模式内。该表单是一个更新表单，我从 View (表)获取用于更新的参数(id)，然后我使用数据id将其传递给模态，但我不知道如何在模态中将其获取到我的操作表单中，我尝试了 jQuery 但仍然出错。

查看:

  @foreach (App\Model\Users::all() as $users)
                <tr>
                  <td class="fname_{{ $users->id_user }}">{{ $users->nama_depan }}</td>
                  <td class="lname_{{ $users->id_user }}">{{ $users->nama_belakang }}</td>
                  <td class="emali_{{ $users->id_user }}">{{ $users->email_user }}</td>
                  <td class="nohp_{{ $users->id_user }}">{{ $users->no_hp }}</td>

                  <td>
                    <a href="#" data-target="#modaledit" data-toggle="modal" data-id="{{ $users->id_user }}"><i class="fa fa-pencil"></i></a>
                    <a href="#" data-href="{{ route('delete-user', $users->id_user) }}" data-toggle="modal" data-target="#modaldelete"><i class="fa fa-trash-o" style="margin-left:10px"></i></a>
                  </td>
                </tr>
                @endforeach

模态:

<div id="modaledit" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit User</h4>
          </div>
          <form id="formedit", method="PUT", action="">
          <div class="modal-body">
            <div class="form-group">
              <label for="InputEmail">Email address</label>
                <input type="text" class="form-control"
                id="InputEmail" value="a"/>
            </div>
            <div class="form-group">
              <label for="InputFname">First Name</label>
                <input type="text" class="form-control"
                id="InputFname"/>
            </div>
            <div class="form-group">
              <label for="InputLname">Last Name</label>
                <input type="text" class="form-control"
                id="InputLname"/>
            </div>
            <div class="form-group">
              <label for="Inputnohp">Phone Number</label>
                <input type="text" class="form-control"
                id="Inputnohp"/>
            </div>

          </div>
          <div class="modal-footer">
            <button type="submit" id="submit-edit" class="btn btn-default">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </form>
          </div>
        </div>
      </div>
    </div>

jQuery:

  $('#modaledit').on('show.bs.modal', function(e) {
        var data_id = ($(e.relatedTarget).attr('data-id'));
        var email = $('.emali_'+data_id).text();
        var fname = $('.fname_'+data_id).text();
        var lname = $('.lname_'+data_id).text();
        var nohp = $('.nohp_'+data_id).text();
        $(this).find('#InputEmail').attr('value', email);
        $(this).find('#InputFname').attr('value', fname);
        $(this).find('#InputLname').attr('value', lname);
        $(this).find('#Inputnohp').attr('value', nohp);
        $(this).find('#submit-edit').on('click', function(){
          $('#formedit').attr('action', "{{ URL::to('allusers.update',data_id) }}");
        });

    });

路线:

Route::resource('allusers','AllUsersController');

Controller :

public function update(Request $request, $id_user)
{
    //
    $users = \App\Model\Users::findOrFail($id_user);
    //$users->update($request->all());
    $users->email_user = Input::get('InputEmail');
    $users->nama_depan = Input::get('InputFname');
    $users->nama_belakang = Input::get('InputLname');
    $users->no_hp = Input::get('Inputnohp');
    $users->save();
    return redirect()->route('all-users');

}

Answer 1

可以直接使用.data()获取ID。对于td的类，不需要使用数据进行后修复，请参见以下版本:

将 {{ URL::route('allusers.update','') }} 放入表单的操作中，然后；

HTML

@foreach (App\Model\Users::all() as $users)
   <tr>
       <td class="fname">{{ $users->nama_depan }}</td>
       <td class="lname">{{ $users->nama_belakang }}</td>
       <td class="emali">{{ $users->email_user }}</td>
       <td class="nohp">{{ $users->no_hp }}</td>
       <td>
           <a href="#" data-target="#modaledit" data-toggle="modal" data-id="{{ $users->id_user }}"><i class="fa fa-pencil"></i></a>
           <a href="#" data-href="{{ route('delete-user', $users->id_user) }}" data-toggle="modal" data-target="#modaldelete"><i class="fa fa-trash-o" style="margin-left:10px"></i></a>
       </td>
   </tr>
@endforeach

JS

$('#modaledit').on('show.bs.modal', function(e) {

    var $this = $(e.relatedTarget);
    var data_id = $this.data('id');
    var modal = $('#modaledit');

    var parentTr = $this.closest('tr');
    var email = parentTr.find('.emali').text();
    var fname = parentTr.find('.fname').text();
    var lname = parentTr.find('.lname').text();
    var nohp = parentTr.find('.nohp').text();

    // directly use .val() instead of .attr()
    modal.find('#InputEmail').val(email);
    modal.find('#InputFname').val(fname);
    modal.find('#InputLname').val(lname);
    modal.find('#Inputnohp').val(nohp);        
    modal.find('#formedit').attr('action', function (i,old) {
       return old + '/' + data_id;
    });

});