我一直无法在服务器中获取多个复选框的值,每次转储时总是给我空。
但是我可以在控制台中获取这些值,但我希望它们在服务器中,不幸的是我不知道如何做到这一点。我从这个网站、yotube 等尝试了很多方法,但我总是失败。我还在学习中,希望你能理解我的解释,非常感谢你抽出时间来写这篇文章
这是表单代码
<form action="/kelompok-asistensi/asisten/{{$user->id}}/peserta" method="POST" id="formtambahpeserta">
@csrf
<div class="modal-body" id="modalLgContent">
<div class="d-flex">
<div class="asisten-pendamping">Asisten</div>
<div class="nama-asisten">{{$asisten->nama}}</div>
</div>
@if($peserta_all->count() > 0)
<div class="pilih">
Pilih peserta untuk ditambah ke kelompok ini
</div>
@endif
<div class="card">
<div class="alert alert-success collapse" role="alert" id="success-alerts">
<span class="success-text"></span>
</div>
@if($peserta_all->count() > 0)
<table class="table pilih-peserta" cellspacing="0" id="example">
<thead>
<tr>
<th class="col-1"></th>
<th class="col-2">No</th>
<th class="col-3">NPM</th>
<th class="col-4">Nama</th>
<th class="col-5">Angkatan</th>
</tr>
</thead>
<tbody>
@foreach($peserta_all as $data)
<tr>
<td><input type="checkbox" class="checkbox" name="check-box" id="chk" value="{{ $data->id }}"></td>
<td>{{ $loop->iteration }}</td>
<td>{{ $data->npm }}</td>
<td>{{ $data->nama }}</td>
<td>{{ $data->id_angkatan }}</td>
</tr>
@endforeach
</tbody>
</table>
@else
<div class="status">
<a>Tidak ada peserta untuk dapat ditambah</a>
</div>
@endif
</div>
<input name="id_asisten" type="hidden" class="form-control" id="id_asisten" autocomplete="off" value="{{ $user->id }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal" style="color: rgb(71, 71, 71);">Close</button>
@if($peserta->count() > 0)
<button type="submit" class="btn btn-outline-primary" id="habc">Tambah</button>
@endif
</div>
</form>
这是javascript代码
$(document).ready( function () {
table = $('#example').DataTable({
"order": [[ 1, "asc" ]],
"pagingType": "numbers",
"pageLength": 15,
"info": false,
language: {
searchPlaceholder: "cari",
search: "",
},
columnDefs: [
{ "targets": 0, "sortable":false },
{ "targets": 1 },
{ "targets": 2, "sortable":false },
{ "targets": 3, "sortable":false },
{ "targets": 4 }
]
});
$("#formtambahpeserta").on('submit', function(e){
let checkbox_terpilih = $('#example tbody .checkbox:checked');
let semua_npm = [];
$.each(checkbox_terpilih, function(i, elm) {
semua_npm.push(elm.value);
});
console.log(semua_npm);
$.ajax({
url:$(this).attr('action'),
method:'post',
dataType: 'json',
data: {npm:semua_npm},
contentType:"application/json; charset=utf-8",
success:function(res){
table.ajax.reload(null, false);
$("#modaltambahpeserta").modal('hide');
}
});
}); });
这是控制器
public function peserta_tambah(Request $request, User $user)
{
dd($request->npm);
Peserta::where('id_asisten', $user->id)->whereIn('id', $request->npm)->update(['id_asisten' => $user->id]);
return response()->json(true);
}
编辑:
这是路线
Route::post('/kelompok-asistensi/asisten/{user:id}/peserta', [KelompokController::class, 'peserta_tambah']);
所以我检查了多个复选框,只有一个数据,而且ajax中似乎没有数组,因为它在请求中看不到
答案 0 :(得分:2)
您需要从 ajax 中删除 contentType:"application/json; charset=utf-8"
。因此它使用默认内容类型。
如果你没有在 ajax 中全局设置 csrf 令牌
$.ajax({
url:$(this).attr('action'),
method:'post',
data: {npm:semua_npm, _token: @json(csrf_token())},
success:function(res){
}
});
然后在您的服务器端您可以像这样访问
$request['npm']
更新
$("#formtambahpeserta").on('submit', function(e){
e.preventDefault();
let checkbox_terpilih = $('#example tbody .checkbox:checked');
let semua_npm = [];
$.each(checkbox_terpilih, function(i, elm) {
semua_npm.push(elm.value);
});
console.log(semua_npm);
$.ajax({
url:$(this).attr('action'),
method:'post',
data: {npm:semua_npm, _token: @json(csrf_token())},
success:function(res){
table.ajax.reload(null, false);
$("#modaltambahpeserta").modal('hide');
}
});
}); });
你的控制器方法应该是
public function peserta_tambah(Request $request, User $user)
{
Peserta::where('id_asisten', $user->id)->whereIn('id', $request['npm'])->update(['id_asisten' => $user->id]);
return response()->json(true);
}