Menampilkan Data Saat Klik Dropdown di Laravel

Masalah/Tujuan

Ada 3 komponen. Satu dropdown (select) dan dua lagi input text yang read only.

Dropdown tersebut isinya daftar data (contoh mahasiswa) yang ngambil dari database. Saat dropdown tersebut di klik, harapannya dia ngambil data dari database dan menampilkan data tersebut pada komponen input text yang read only tadi.

Contoh kita klik mahasiswa dengan nama Abdul di dropdown, dan otomatis menampilkan informasi tambahan pada input text misalnya alamat atau jurusan.

Solusi

Contoh script di controller Laravel untuk ngambil data dari model (database) dan return hasilnya dalam bentuk JSON.

public function get_mahasiswa($id)
{
    $mahasiswa = Mahasiswa::find($id);
    $prodi = Prodi::find($mahasiswa->prodi_id);
    return Response::json([
        'mahasiswa' => $mahasiswa,
        'prodi' => $prodi,
    ], 200);
}

Contoh fungsi JavaScript untuk load fungsi yang kita buat di controller. Disini kita menggunakan jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function getMahasiswa(id) {
    if (id == '') {
        $("#nama").val('');
        $("#prodi_id").val('');
    }else{
        $.getJSON('/mahasiswa/'+id, null,
            function(data){
                $("#nama").val(data.mahasiswa.nama);
                $("#prodi_id").val(data.prodi.nama_prodi);
        });
    }
}
</script>

Baris ke-8 merupakan link URL untuk eksekusi fungsi yang ada di controller.

Contoh penggunaannya di HTML. Kita gunakan fungsi onchange agar proses dilakukan saat kita klik dropdown atau saat isi yang ada di dropdown berubah.

<select onchange="getMahasiswa(this.value)" name="mahasiswa_id" id="mahasiswa_id">
    <option value="123">123</option>
    <option value="124">124</option>
</select>

<input type="text" name="nama" id="nama" readonly />
<input type="text" name="prodi_id" id="prodi_id" readonly />

Leave a Reply