Select OnChange Javascript on Laravel

Question

I want to make it so that when I click on one of the dropdowns, a value based on the record ID from the related table appears immediately. I want to make it so that when I click on one of the dropdowns, a value based on the record ID from the related table appears immediately. When "golongan" is selected, the value of "gaji pokok" automatically appears. When "asisten ahli" is selected, the value for "tunjangan fungsional" appears automatically. When "Chairman Assistant | Expert Assistant" is selected, the value of "Structure Allowance" automatically appears.

<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form action="/gaji/insert" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <select name="nama" type="text" class="form-control select2 @error('nama') is-invalid @enderror" value="{{ old('nama') }}">
                                    <option>-- Nama Karyawan --</option>
                                    @foreach ($karyawan as $data)
                                    <option value="{{ $data->nama }}">{{ $data->nama }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('nama')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="gol" type="text" class="form-control select2 @error('gol') is-invalid @enderror" onchange="getddl()" value="{{ old('gol') }}">
                                    <option>-- Golongan dan M K G --</option>
                                    @foreach ($golongan as $data)
                                    <option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control @error('tunjangan_gol') is-invalid @enderror" value="{{ old('tunjangan_gol') }}" id="gol">
                                <div class="invalid-feedback">
                                    @error('tunjangan_gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="jbt_fungsi" type="text" class="form-control select2 @error('jbt_fungsi') is-invalid @enderror" value="{{ old('jbt_fungsi') }}">
                                    <option>-- Jabatan Fungsional --</option>
                                    @foreach ($fungsi as $data)
                                    <option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control @error('tunjangan_fungsi') is-invalid @enderror" value="{{ old('tunjangan_fungsi') }}">
                                <div class="invalid-feedback">
                                    @error('tunjangan_fungsi')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="jbt_struktur" type="text" class="form-control select2 @error('jbt_struktur') is-invalid @enderror" value="{{ old('jbt_struktur') }}">
                                    <option>-- Jabatan Struktural & Fungsional --</option>
                                    @foreach ($struktur as $data)
                                    <option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('jbt_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control @error('tunjangan_struktur') is-invalid @enderror" value="{{ old('tunjangan_struktur') }}">
                                <div class="invalid-feedback">
                                    @error('tunjangan_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control @error('total_gaji') is-invalid @enderror" value="{{ old('total_gaji') }}">
                                <div class="invalid-feedback">
                                    @error('total_gaji')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

How to use Javascript onChange for packaging in laravel?

Answer 1

Sorry, I don't understand your language very well, but you can do something like this with jquery

<div class="form-group mb-3">
        <select  id="country-dropdown" class="form-control">
            <option value="">-- Select Country --</option>
            @foreach ($countries as $data)
            <option value="{{$data->id}}">
                {{$data->name}}
            </option>
            @endforeach
        </select>
    </div>
    <div class="form-group mb-3">
        <select id="state-dropdown" class="form-control">
        </select>
    </div>
    <div class="form-group">
        <select id="city-dropdown" class="form-control">
        </select>
    </div>

You can leave the dependency dropdown empty and then get these dependency dropdowns via ajax like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        /*------------------------------------------
        --------------------------------------------
        Country Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#country-dropdown').on('change', function () {
            var idCountry = this.value;
            $("#state-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-states')}}",
                type: "POST",
                data: {
                    country_id: idCountry,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#state-dropdown').html('<option value="">-- Select State --</option>');
                    $.each(result.states, function (key, value) {
                        $("#state-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                }
            });
        });

        /*------------------------------------------
        --------------------------------------------
        State Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#state-dropdown').on('change', function () {
            var idState = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-cities')}}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });

    });
</script>

And declare in ajax the route you will call in the url

Route::post('etch-states', [DropdownController::class, 
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);

Perform the following operations in the controller:

public function fetchState(Request $request)
{
    $data['states'] = State::where("country_id", $request->country_id)
                            ->get(["name", "id"]);

    return response()->json($data);
}
/**
 * Write code on Method
 *
 * @return response()
 */
public function fetchCity(Request $request)
{
    $data['cities'] = City::where("state_id", $request->state_id)
                                ->get(["name", "id"]);
                                  
    return response()->json($data);
}