我想在laravel中提交一个表单,表单在bootstrap模式中。 该表单是一个更新表单,我从视图(表)获取更新的参数(id),然后我使用data-id将其传递给modal,但我不知道如何在模式中的动作表单中获取它,我尝试过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">×</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');
控制器:
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');
}
答案 0 :(得分:2)
您可以直接使用.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;
});
});