Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
TOLONG BANTU SAYA PUH
<div class="relative sm:rounded-lg">
<div class="max-w-sm mx-auto">
<div class="card-body">
<div class="col-8">
<!-- Form utama -->
<form action="/insertdata" method="POST" enctype="multipart/form-data">
@csrf
<!-- Input Nama -->
<div class="mb-5">
<label for="nama" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama</label>
<input type="text" name="Nama" id="nama" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Isi nama anda dengan benar!!!" required />
</div>
<!-- Input Company -->
<div class="mb-5">
<label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Company</label>
<input type="text" name="Company" id="company" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
</div>
<!-- Contries -->
<div x-data="multiSelect()" class="mb-5 relative">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Country</label>
<!-- Selected Items -->
<div class="flex-wrap gap-2 bg-gray-50 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 p-2 cursor-pointer" name="Country" @click="open = !open">
<template x-for="(item, index) in selected" :key="index">
<div class="flex items-center bg-gray-600 text-gray-900 dark:text-white px-2 py-1 rounded">
<span x-text="item"></span>
<button @click.stop="removeItem(item)" class="ml-2 text-gary-900 hover:text-gray-900">×</button>
</div>
</template>
<span x-show="selected.length === 0" class="text-gray-400">Select Country...</span>
<span class="ml-auto">▾</span>
</div>
<!-- Dropdown -->
<div x-show="open" @click.away="open = false" class="absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-50 max-h-40 overflow-y-auto">
<div class="max-h-40 overflow-y-auto">
<template x-for="(item, index) in options" :key="index">
<label class="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 cursor-pointer">
<input type="checkbox" :value="item" x-model="selected" class="form-checkbox text-gray-900">
<span x-text="item"></span>
</label>
</template>
</div>
</div>
</div>
<script>
function multiSelect() {
return {
open: false,
selected: [],
options: ["Afghanistan", "Australia", "Brazil", "Canada", "Denmark", "France", "Germany", "Indonesia", "Japan", "Mexico"],
removeItem(value) {
this.selected = this.selected.filter(item => item !== value);
}
};
}
</script>
{{-- Email --}}
<div class="mb-5">
<label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="Email" name="Email" id="Email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
</div>
<!-- Input Nomor Telepon -->
<div class="mb-5">
<label for=" " class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone Number</label>
<input type="number" name="Phone" id="company" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
</div>
<!-- Tombol Submit -->
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Submit
</button>
</form> <!-- Akhir Form -->
</div>
</div>
</div>
</div>
0
Tanggapan
itu kategori Country tidak terbaca sama waktu aku input error
Jangan cuma paste kode ya. Jelaskan masalah kamu dengan detail. Edit pertanyaanya
1 Jawaban:
Masalahnya terletak pada bagian input Country (yang pakai Alpine.js). Saat kamu submit form, data Country tidak ikut terkirim ke backend, karena: elemen yang kamu buat (<div ... name="Country" ...>) bukan input form yang valid, jadi browser tidak akan mengirimkan nilainya.
Kita perlu menambahkan input hidden (<input type="hidden" name="Country">) agar data dari selected[] di Alpine.js bisa dikirim ke backend saat form disubmit.
<div x-data="multiSelect()" class="mb-5 relative">
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Country</label>
<!-- Hidden input agar data terkirim -->
<template x-for="(item, index) in selected" :key="index">
<input type="hidden" name="Country[]" :value="item">
</template>
<!-- Selected Items -->
<div
class="flex flex-wrap gap-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2 cursor-pointer dark:bg-gray-700 dark:border-gray-600 dark:text-white"
@click="open = !open"
>
<template x-for="(item, index) in selected" :key="index">
<div class="flex items-center bg-blue-600 text-white px-2 py-1 rounded">
<span x-text="item"></span>
<button @click.stop="removeItem(item)" class="ml-2 hover:text-gray-200">×</button>
</div>
</template>
<span x-show="selected.length === 0" class="text-gray-400">Select Country...</span>
<span class="ml-auto">▾</span>
</div>
<!-- Dropdown -->
<div
x-show="open"
@click.away="open = false"
class="absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-50 max-h-40 overflow-y-auto dark:bg-gray-800 dark:border-gray-700"
>
<template x-for="(item, index) in options" :key="index">
<label class="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600">
<input type="checkbox" :value="item" x-model="selected" class="form-checkbox text-blue-600">
<span x-text="item"></span>
</label>
</template>
</div>
</div>
<script>
function multiSelect() {
return {
open: false,
selected: [],
options: ["Afghanistan", "Australia", "Brazil", "Canada", "Denmark", "France", "Germany", "Indonesia", "Japan", "Mexico"],
removeItem(value) {
this.selected = this.selected.filter(item => item !== value);
}
};
}
</script>
Penjelasan:
- input type="hidden" name="Country[]" :value="item" → ini yang bikin nilai-nilai dari selected[] dikirimkan lewat form POST.
- Kalau kamu pilih lebih dari satu country, semua akan terkirim dalam array Country[] di request()->input('Country').
Di sisi Controller (contoh):
public function insertdata(Request $request)
{
$validated = $request->validate([
'Nama' => 'required',
'Company' => 'required',
'Country' => 'required|array',
'Email' => 'required|email',
'Phone' => 'required|numeric',
]);
dd($validated);
}
Kalau kamu pilih “Japan” dan “Indonesia”, maka hasil dd($validated['Country']) adalah:
array:2 [
0 => "Japan"
1 => "Indonesia"
]
0
