Cacher is the code snippet organizer for pro developers

<?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use App\Product;
    
    //create form
    
    public function create()
    {
        $states = State::pluck('state_name','id');

        return view('products.create',compact('states'));
    }
    
    //edit form
    
    public function edit($id)
    {
        //dapatkan maklumat produk sedia ada
        $product = Product::find($id);

        $states = State::pluck('state_name','id');

        //get area based on previously selected state

        $areas = $this->getStateAreas($product->area->state_id);

        return view('products.edit',compact('states','product','areas'));
    }


    //return areas for state

    public function getStateAreas($state_id)
    {
        $areas = Area::whereStateId($state_id)->pluck('area_name','id');

        return $areas;
    }

@extends('layouts.app')

@section('content')

<div class="form-group">
                      {!! Form::label('state_id', 'State') !!}   
                      {!! Form::select('state_id', $states, null, ['placeholder' => 'Select State','class'=>'form-control','id'=>'state_id']); !!}
                  </div>

                  <div class="form-group">
                      {!! Form::label('area_id', 'Area') !!}   
                      {!! Form::select('area_id', [], null, ['placeholder' => 'Select Area','class'=>'form-control','id'=>'area_id']); !!}
                  </div>
                  
@endsection
                  
                  
@section('script')

<script type="text/javascript">
    
    $( document ).ready(function() {
        
        //dapatkan previous selected state_id bila validation error

        var selected_state_id = '{{ old('state_id') }}';

        //kalau ada selected state_id, kita panggil balik function ajax dapatkan area

        if (selected_state_id.length>0) {
            
            getStateAreas(selected_state_id);

        };

        function getStateAreas(state_id){

          //define route untuk hantar id state ke controller, grab data area

          var ajax_url = '/products/areas/' + state_id;

          //dapatkan areas data dari Controller menggunakan Ajax

          $.get( ajax_url, function( data ) {
            
            // dah dapat data, kosongkan dulu dropdown area dan tambah Select Area

            $('#area_id').empty().append('<option value="">Select Area</option');

            // loop data untuk hasilkan senarai option baru bagi dropdown

            $.each(data, function(area_id,area_name){
            
                $('#area_id').append('<option value='+area_id+'>'+area_name+'</option');
            });

            //dapatkan previous selected area if there is form validation error
            var selected_area_id = '{{ old('area_id') }}';

            if (selected_area_id.length>0) {
                //pilih balik area based on previous selected are
                $('#area_id').val(selected_area_id);
            };

          });


        }

        $( "#state_id" ).change(function() {
          
          //dapatkan value state yang kita pilih
          var state_id = $(this).val();

          getStateAreas(state_id);
        
        });


    });


</script>

@endsection

@extends('layouts.app')

@section('content')

<div class="form-group">
                      {!! Form::label('state_id', 'State') !!}   
                      {!! Form::select('state_id', $states, $product->area->state_id, ['placeholder' => 'Select State','class'=>'form-control','id'=>'state_id']); !!}
                  </div>

                  <div class="form-group">
                      {!! Form::label('area_id', 'Area') !!}   
                      {!! Form::select('area_id', $areas, $product->area_id, ['placeholder' => 'Select Area','class'=>'form-control','id'=>'area_id']); !!}
                  </div>
                  
@endsection
                  
                  
@section('script')

<script type="text/javascript">
    
    $( document ).ready(function() {
        
        //dapatkan previous selected state_id bila validation error

        var selected_state_id = '{{ old('state_id') }}';

        //kalau ada selected state_id, kita panggil balik function ajax dapatkan area

        if (selected_state_id.length>0) {
            
            getStateAreas(selected_state_id);

        };

        function getStateAreas(state_id){

          //define route untuk hantar id state ke controller, grab data area

          var ajax_url = '/products/areas/' + state_id;

          //dapatkan areas data dari Controller menggunakan Ajax

          $.get( ajax_url, function( data ) {
            
            // dah dapat data, kosongkan dulu dropdown area dan tambah Select Area

            $('#area_id').empty().append('<option value="">Select Area</option');

            // loop data untuk hasilkan senarai option baru bagi dropdown

            $.each(data, function(area_id,area_name){
            
                $('#area_id').append('<option value='+area_id+'>'+area_name+'</option');
            });

            //dapatkan previous selected area if there is form validation error
            var selected_area_id = '{{ old('area_id') }}';

            if (selected_area_id.length>0) {
                //pilih balik area based on previous selected are
                $('#area_id').val(selected_area_id);
            };

          });


        }

        $( "#state_id" ).change(function() {
          
          //dapatkan value state yang kita pilih
          var state_id = $(this).val();

          getStateAreas(state_id);
        
        });


    });


</script>

@endsection

Route::get('products/areas/{state_id}', 'ProductsController@getStateAreas');