Post Detail

Laravel

Laravel Select Input jQuery Database

by Abdul Rohim
24 December 2020
690 views

Selamat datang kembali, semoga kita semua sehat selalu ..

Pada kesempatan kali ini saya akan membagikan sebuah tulisan mengenai bagaimana cara mengambil data secara otomatis didatabase dengan inputan select.. Pada kasus ini saya ketika saya memilih no anggota maka secara otomatis muncul nama anggota tersebut pada form yang sudah disediakan

Untuk form nya seperti ini, tidak semua form saya tampilkan pada code dibawah ini

<div class="form-group col-md-6">
        <label for="anggota_id">No Baku Anggota</label>
        {!! Form::select('anggota_id', [''=>'** No Anggota **']+App\Anggota::pluck('nik','id')->all(), null,
        ['class' => $errors->has('anggota_id') ? 'form-control is-invalid select2' : 'form-control select2', 'id'=>'id-anggota']) !!}
        @error('anggota_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    <div class="form-group col-md-6">
        <label for="nama">Nama Lengkap</label>
        {!! Form::text('nama', null, ['class' => $errors->has('nama') ? 'form-control is-invalid' : 'form-control', 'placeholder' => 'Nama Lengkap', 'id'=>'nama-anggota']) !!}
        @error('nama')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

Untuk jQuery nya

$('select[name=anggota_id]').on('change', function(e){
            e.preventDefault();
            var anggotaId = $( "select[name=anggota_id] option:selected" ).val();
            if(anggotaId === '')
            {
                $('input[name=nama]').val("");
            }else {
                var url = '{{ route('anggota.chek-anggota', ":id")}}';
                url = url.replace(':id', anggotaId);
                $.ajax({
                    type:'GET',
                    url: url,
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success: function(data){
                        $('input[name=nama]').val(data.anggota.nama);
                    }
                });
            }
        });

Untuk Route dan Controller nya

Route::get('/anggota-check/{anggota}', 'AnggotaController@cekAnggota')->name('anggota.chek-anggota');

public function cekAnggota(Request $request, $id)
    {
        if($request->ajax())
        {
            $anggota = Anggota::find($id);
            // $anggota = Anggota::find($request->anggota);
            return response()->json([
                'anggota' => $anggota,
            ]);
        }
    }

Dan untuk hasilnya seperti dibawah ini

select