So, i had problems with storing datas from a form which contains array in it. Here's my create.blade.php view, and i'm using JS to make dynamic input to create another input based on the same div:
<form action="{{ route('grading_sheets.store') }}" method="POST" class="needs-validation" novalidate="">
@csrf
{{-- another inputs here --}}
<div class="attitude_container">
<div class="d-flex flex-row align-items-center justify-content-center">
<div class="col-4">
<div class="form-group">
<label for="point_id" class="form-label">Nilai Sikap <span
class="text-danger">*</span></label>
<select name="point_id[]" type="text"
class="form-control select2 @error('point_id') is-invalid @enderror"
value="{{ old('point_id') }}" required autocomplete="point_id">
<option value="" disabled selected>- Pilih Nilai Sikap -</option>
@foreach ($points as $point)
<option value="{{$point->id}}"
{{ old('point_id') == $point->id ? 'selected' : '' }}>
{{$point->attitude_point}}
</option>
@endforeach
</select>
@if (count($errors) > 0)
@error('point_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai sikap
</div>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group">
<label>Nilai <span class="text-danger">*</span></label>
<input type="number" id="grade" name="grade[]"
class="form-control @error('grade') is-invalid @enderror"
placeholder="Masukkan nilai" value="{{ old('grade') }}" required>
@if (count($errors) > 0)
@error('grade')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai
</div>
@endif
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Predikat <span class="text-danger">*</span></label>
<select class="form-control select2 @error('predicate') is-invalid @enderror"
name="predicate[]" value="{{ old('predicate') }}" required>
<option value="" disabled selected>- Pilih Predikat -</option>
<option value="A" {{ old('predicate') == 'A' ? 'selected' : '' }}>
A</option>
<option value="B" {{ old('predicate') == 'B' ? 'selected' : '' }}>
B</option>
<option value="C" {{ old('predicate') == 'C' ? 'selected' : '' }}>
C</option>
<option value="D" {{ old('predicate') == 'D' ? 'selected' : '' }}>
D</option>
<option value="E" {{ old('predicate') == 'E' ? 'selected' : '' }}>
E</option>
<option value="F" {{ old('predicate') == 'F' ? 'selected' : '' }}>
F</option>
<option value="Kompeten" {{ old('predicate') == 'Kompeten' ? 'selected' : '' }}>
Kompeten</option>
</select>
@if (count($errors) > 0)
@error('predicate')
<div class="invalid-feedback">
The predicate field is required.
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan predikat
</div>
@endif
</div>
</div>
<div class="col-1">
<a href="#" class="btn btn-icon btn-primary add_attitude_form"><i
class="fas fa-plus"></i></a>
</div>
</div>
</div>
<hr>
<div class="competency_container">
<div class="d-flex flex-row align-items-center justify-content-center">
<div class="col-4">
<div class="form-group">
<label for="competency_point" class="form-label">Nilai Kompetensi <span
class="text-danger">*</span></label>
<select id="competency_point" name="competency_point[]" type="text"
class="form-control select2 @error('competency_point') is-invalid @enderror"
value="{{ old('competency_point') }}" required autocomplete="competency_point">
<option value="" disabled selected>- Pilih Kompetensi -</option>
@foreach ($points as $point)
<option value="{{$point->competency_point}}"
{{ old('competency_point') == $point->competency_point ? 'selected' : '' }}>
{{$point->competency_point}}
</option>
@endforeach
</select>
@if (count($errors) > 0)
@error('competency_point')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai kompetensi
</div>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group">
<label>Nilai <span class="text-danger">*</span></label>
<input type="number" id="grade" name="grade[]"
class="form-control @error('grade') is-invalid @enderror"
placeholder="Masukkan nilai" value="{{ old('grade') }}" required>
@if (count($errors) > 0)
@error('grade')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai
</div>
@endif
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Predikat <span class="text-danger">*</span></label>
<select class="form-control select2 @error('predicate') is-invalid @enderror"
name="predicate[]" id="predicate" value="{{ old('predicate') }}" required>
<option value="" disabled selected>- Pilih Predikat -</option>
<option value="A" {{ old('predicate') == 'A' ? 'selected' : '' }}>
A</option>
<option value="B" {{ old('predicate') == 'B' ? 'selected' : '' }}>
B</option>
<option value="C" {{ old('predicate') == 'C' ? 'selected' : '' }}>
C</option>
<option value="D" {{ old('predicate') == 'D' ? 'selected' : '' }}>
D</option>
<option value="E" {{ old('predicate') == 'E' ? 'selected' : '' }}>
E</option>
<option value="F" {{ old('predicate') == 'F' ? 'selected' : '' }}>
F</option>
<option value="Kompeten" {{ old('predicate') == 'Kompeten' ? 'selected' : '' }}>
Kompeten</option>
</select>
@if (count($errors) > 0)
@error('predicate')
<div class="invalid-feedback">
The predicate field is required.
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan predikat
</div>
@endif
</div>
</div>
<div class="col-1">
<a href="#" class="btn btn-icon btn-primary add_competency_form"><i
class="fas fa-plus"></i></a>
</div>
</div>
</div>
<hr>
<div class="float-right">
<div class="form-group">
<button class="btn btn-primary" type="submit">Tambah</button>
</div>
</div>
</form>
That JS dynamic function:
<script>
// Bagian div attitude
$(document).ready(function () {
let max_fields = 8
let wrapper = $('.attitude_container')
let add_button = $('.add_attitude_form')
let x = 1
$(add_button).click(function (e) {
e.preventDefault()
if (x < max_fields) {
x++
$(wrapper).append(
`<div class="d-flex flex-row align-items-center justify-content-center">
<div class="col-4">
<div class="form-group">
<label for="point_id" class="form-label">Nilai Sikap <span
class="text-danger">*</span></label>
<select name="point_id[]" type="text"
class="form-control select2 @error('point_id') is-invalid @enderror"
value="{{ old('point_id') }}" required autocomplete="point_id">
<option value="" disabled selected>- Pilih Nilai Sikap -</option>
@foreach ($points as $point)
<option value="{{$point->id}}"
{{ old('point_id') == $point->id ? 'selected' : '' }}>
{{$point->attitude_point}}
</option>
@endforeach
</select>
@if (count($errors) > 0)
@error('point_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai sikap
</div>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group">
<label>Nilai <span class="text-danger">*</span></label>
<input type="number" id="grade" name="grade[]"
class="form-control @error('grade') is-invalid @enderror"
placeholder="Masukkan nilai" value="{{ old('grade') }}" required>
@if (count($errors) > 0)
@error('grade')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai
</div>
@endif
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Predikat <span class="text-danger">*</span></label>
<select class="form-control select2 @error('predicate') is-invalid @enderror"
name="predicate[]" value="{{ old('predicate') }}" required>
<option value="" disabled selected>- Pilih Predikat -</option>
<option value="A" {{ old('predicate') == 'A' ? 'selected' : '' }}>
A</option>
<option value="B" {{ old('predicate') == 'B' ? 'selected' : '' }}>
B</option>
<option value="C" {{ old('predicate') == 'C' ? 'selected' : '' }}>
C</option>
<option value="D" {{ old('predicate') == 'D' ? 'selected' : '' }}>
D</option>
<option value="E" {{ old('predicate') == 'E' ? 'selected' : '' }}>
E</option>
<option value="F" {{ old('predicate') == 'F' ? 'selected' : '' }}>
F</option>
<option value="Kompeten" {{ old('predicate') == 'Kompeten' ? 'selected' : '' }}>
Kompeten</option>
</select>
@if (count($errors) > 0)
@error('predicate')
<div class="invalid-feedback">
The predicate field is required.
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan predikat
</div>
@endif
</div>
</div>
<div class="col-1">
<a href="#" class="btn btn-icon btn-danger delete_attitude"><i class="fas fa-trash"></i></a>
</div>
</div>`
) // nambah div competency
} else {
alert('Telah melebihi batas')
}
})
$(wrapper).on('click', '.delete_attitude', function (e) {
e.preventDefault()
$(this).closest('.d-flex').remove()
x--
})
})
// Bagian div competency
$(document).ready(function () {
let max_fields = 8
let wrapper = $('.competency_container')
let add_button = $('.add_competency_form')
let x = 1
$(add_button).click(function (e) {
e.preventDefault()
if (x < max_fields) {
x++
$(wrapper).append(
`<div class="d-flex flex-row align-items-center justify-content-center">
<div class="col-4">
<div class="form-group">
<label for="competency_point" class="form-label">Nilai Kompetensi <span class="text-danger">*</span></label>
<select id="competency_point" name="competency_point[]" type="text"
class="form-control select2 @error('competency_point') is-invalid @enderror"
value="{{ old('competency_point') }}" required autocomplete="competency_point">
<option value="" disabled selected>- Pilih Kompetensi -</option>
@foreach ($points as $point)
<option value="{{$point->competency_point}}"
{{ old('competency_point') == $point->competency_point ? 'selected' : '' }}>
{{$point->competency_point}}
</option>
@endforeach
</select>
@if (count($errors) > 0)
@error('competency_point')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai kompetensi
</div>
@endif
</div>
</div>
<div class="col-4">
<div class="form-group">
<label>Nilai <span class="text-danger">*</span></label>
<input type="number" id="grade" name="grade[]"
class="form-control @error('grade') is-invalid @enderror"
placeholder="Masukkan nilai" value="{{ old('grade') }}" required>
@if (count($errors) > 0)
@error('grade')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan nilai
</div>
@endif
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Predikat <span class="text-danger">*</span></label>
<select class="form-control select2 @error('predicate') is-invalid @enderror"
name="predicate[]" id="predicate" value="{{ old('predicate') }}" required>
<option value="" disabled selected>- Pilih Predikat -</option>
<option value="A" {{ old('predicate') == 'A' ? 'selected' : '' }}>
A</option>
<option value="B" {{ old('predicate') == 'B' ? 'selected' : '' }}>
B</option>
<option value="C" {{ old('predicate') == 'C' ? 'selected' : '' }}>
C</option>
<option value="D" {{ old('predicate') == 'D' ? 'selected' : '' }}>
D</option>
<option value="E" {{ old('predicate') == 'E' ? 'selected' : '' }}>
E</option>
<option value="F" {{ old('predicate') == 'F' ? 'selected' : '' }}>
F</option>
<option value="Kompeten" {{ old('predicate') == 'Kompeten' ? 'selected' : '' }}>
Kompeten</option>
</select>
@if (count($errors) > 0)
@error('predicate')
<div class="invalid-feedback">
The predicate field is required.
</div>
@enderror
@else
<div class="invalid-feedback">
Mohon isikan predikat
</div>
@endif
</div>
</div>
<div class="col-1">
<a href="#" class="btn btn-icon btn-danger delete_competency"><i class="fas fa-trash"></i></a>
</div>
</div>`
) // nambah div competency
} else {
alert('Telah melebihi batas')
}
})
$(wrapper).on('click', '.delete_competency', function (e) {
e.preventDefault()
$(this).closest('.d-flex').remove()
x--
})
})
</script>
Store method in controller:
public function store(Request $request)
{
$request->validate([
"student_id" => "required|integer",
"nis" => "required|integer",
"class" => "required|string",
"major" => "required|not_in:0",
"point_id" => "required|array",
"point_id.*" => "integer",
"competency_point" => "required|array",
"competency_point.*" => "string",
"grade" => "required|array",
"grade.*" => "integer",
"predicate" => "required|array",
"predicate.*" => "integer",
]);
foreach ($request->point_id as $pointId) {
GradingSheet::create([
"student_id" => $request->student_id,
"nis" => $request->nis,
"class" => $request->class,
"major" => $request->major,
"point_id" => $pointId,
"competency_point" => $request->competency_point,
"grade" => $request->grade,
"predicate" => $request->predicate,
]);
}
return redirect("dashboard/grading_sheets")->with(
"success",
"Tambah data siswa berhasil!"
);
And here's data arrays when i use dd:
array:8 [▼
"student_id" => "1"
"class" => "12"
"major" => "Pengembangan Perangkat Lunak dan Gim"
"point_id" => array:7 [▶]
"grade" => array:15 [▶]
"predicate" => array:15 [▶]
"competency_point" => array:8 [▶]
]
I tried to make foreach to loop all the array but as the result i got that error, how can I store these array datas without getting any trouble?
Solved I'm making those array inputs with brackets like thise: name=grade[], and use json encode in controller:
$createGradingSheet = GradingSheet::create([
'student_id' => $request->student_id,
'nis' => $request->nis,
'class' => $request->class,
'major' => $request->major,
'attitude_point' => json_encode($request->attitude_point),
'competency_point' => json_encode($request->competency_point),
'grade' => json_encode($request->grade),
'predicate' => json_encode($request->predicate),
]);
And i added spesific column with json type like this:
$table->json('attitude_point')->nullable();
$table->json('competency_point')->nullable();
$table->json('grade')->nullable();
$table->json('predicate')->nullable();