>_TECH BLOG TUTORIAL

CLUSTER: ONLINE

TECHNHIT//BLUEPRINT

READING: 0%

Making Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x

FIELD MANUAL N°01 — software engineering

Making Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x

Hello world! Welcome to "TechBlog" and Today we are going to make dynamic address collection form through drop down input.

READ THE MANUAL ↓

09 CHAPTERS4 MIN READEST. 60 FPSNO LIBRARIES HARMED

NOW READINGMaking Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x 02 //How to Install ReactJS on Ubuntu 20.04 03 //Laravel MySQL Connection Explained with Basic Auth 04 //Setup Laravel On Ubuntu with Apache 05 //Install and Use Multiple Node.JS on Linux using NVM NOW READINGMaking Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x 02 //How to Install ReactJS on Ubuntu 20.04 03 //Laravel MySQL Connection Explained with Basic Auth 04 //Setup Laravel On Ubuntu with Apache 05 //Install and Use Multiple Node.JS on Linux using NVM

NOW READINGMaking Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x 02 //How to Install ReactJS on Ubuntu 20.04 03 //Laravel MySQL Connection Explained with Basic Auth 04 //Setup Laravel On Ubuntu with Apache 05 //Install and Use Multiple Node.JS on Linux using NVM NOW READINGMaking Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x 02 //How to Install ReactJS on Ubuntu 20.04 03 //Laravel MySQL Connection Explained with Basic Auth 04 //Setup Laravel On Ubuntu with Apache 05 //Install and Use Multiple Node.JS on Linux using NVM

YOUTUBE COMPANION WALKTHROUGH

Watch step-by-step video on @TechBlogTutorial

INTERACTIVE GAMIFIED DRILL AVAILABLE

Master this architecture with our 6-stage hands-on drill: concept cards, live packet simulator, debate scenarios, and certification exam.

Key Architecture Takeaways

›
Point 1: Full-stack architecture blueprint: Making Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x.
›
Point 2: Covers MVC separation of concerns, routing pipelines, and database abstraction.
›
Point 3: Modern ecosystems: Laravel 11/PHP 8.3, React 19, and Node.js LTS runtimes.

Notice

Modern Framework Landscape (2026)

Web engineering patterns have evolved: Laravel now utilizes PHP 8.2+ typed properties, Vite asset bundling, and strict Eloquent typing, while Node.js LTS supports native fetch and ESM modules out of the box.

Hello world! Welcome to "TechBlog" and Today we are going to make dynamic address collection form through drop down input.

Well, in this context I have some observations as a developer for you. why we do so with an address field. We can take input as a whole or separately, by a text input box easily rather why we are creating such a complex mechanism.

We do so, because of analytics, for example if we take input through text box there might differently spelling of same district, or might user have mistaken in any point of time. In that case, it is difficult to find out the sales or demographics analytics for big organization or company. Hence this concept dynamic load of demographic data is useful with 100% accuracy

View on Youtube:

Database Structure:

bash

-- --------------------------------------------------------

--
-- Table structure for table `geo_locations`
--

CREATE TABLE `geo_locations` (
  `id` int NOT NULL,
  `name` varchar(100) NOT NULL,
  `parent_id` int DEFAULT NULL,
  `external_id` varchar(10) DEFAULT NULL,
  `location_type` varchar(20) NOT NULL,
  `pin` varchar(10) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

----------------------------------------------------------

Download Database SQL file Here:

Web Routes:

bash

Route::get('/', ['as'=>'home', 'uses'=> 'Geolocation@home']);

Route::post('/district-name', ['as'=>'district', 'uses'=>'Geolocation@getDist']);

Route::post('/ps-name', ['as'=>'ps', 'uses'=>'Geolocation@getPS']);

Controller:

By default Laravel has a default controller, but we are going to create a new controller for me. So, in order to do that, type php artisan make:controller Geolocation.

Open up the controller in code editor, we have to create function home inside Geolocation controller and return your view over here.

bash

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Respoce;
use Illuminate\Support\Arr;
use App\Models\GeoLocations;

class Geolocation extends Controller
{
    //
    protected $view_path = 'student';

    public function home(){

        //return view of your form.

        $data=[];
        $data['state']= GeoLocations::where('location_type', 'STATE')->pluck('name','id')->toArray();
        return view($this->view_path.'.register', compact('data'));
    }

    public function getDist(Request $request){
        $data=GeoLocations::where('location_type','DISTRICT')->where('parent_id',$request->id)->select('name', 'id')->get();
        return json_encode($data);
    }

    public function getPS(Request $request){
        $data=GeoLocations::where('location_type','SUBDISTRICT')->where('parent_id',$request->id)->select('name', 'id')->get();
        return json_encode($data);
    }    

}

Models:

Now from database we need to fetch data for dropdown. For that we need a model that construct table collections. So, in order to do that go to terminal and type php artisan make:model GeoLocations

bash

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class GeoLocations extends Model
{
    use HasFactory;
    public $table= "geo_locations";
    protected $fillable =['id', 'name','parent_id', 'external_id', 'location_type', 'pin'];
}

Views:

bash

<link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .form-group {
        margin-top: 15px;
        padding-top: 45px;
    }
</style>

    

        

            

                
{!! Form::open(array('url' => '/')) !!} Red mark input are required. 
                    <hr class="hr-16">
                    
{!! Form::label('address', 'Address', ['class' => 'col-sm-1 control-label']) !!}
                        
{!! Form::text('address', null, ["class" => "form-control border-form upper","required"]) !!}
{!! Form::label('state', 'State', ['class' => 'col-sm-1 control-label']) !!}
                        
{!! Form::select('state', $data['state'],null, ["class" => "form-control border-form upper","required", "onChange" => "loadDistrict(this);"]) !!}

                    

                    
{!! Form::label('district', 'District', ['class' => 'col-sm-1 control-label']) !!}
                        

                            <select id="district" name="district" class="form-control district" onChange="loadPs(this)" ;>
                                <option>Select Dist</option>@if(isset($data['district'])) @foreach($data['district'] as $key)
                                <option selected value="{{$key->id}}">{{$key->name}}</option>@endforeach @endif</select>
                        
{!! Form::label('ps', 'P.S./Sub.Div', ['class' => 'col-sm-1 control-label']) !!}
                        

                            <select id="ps" name="ps" class="form-control ps">
                                <option>Select PS</option>@if(isset($data['ps'])) @foreach($data['ps'] as $key)
                                <option selected value="{{$key->id}}">{{$key->name}}</option>@endforeach @endif</select>
                        
{!! Form::label('pincode', 'Pincode', ['class' => 'col-sm-1 control-label']) !!}
                        
{!! Form::text('pincode', null, ["class" => "form-control border-form upper","required"]) !!}
{!! Form::label('country', 'Country', ['class' => 'col-sm-1 control-label']) !!}
                        
{!! Form::text('country', 'INDIA', ["class" => "form-control border-form upper","required"]) !!}

                    

                

            

        
{!! Form::close() !!}

    <!-- /.col -->

Java Scripts:

bash

<script type="text/javascript">
    function loadDistrict($this){
        $.ajax({
            type: 'POST',
            url: '{{ route('district') }}',
            data: {
                _token: '{{ csrf_token() }}',
                id: $this.value
            },
            success: function (response) {
                var data = $.parseJSON(response);
                if (data.error) {
                    $.notify(data.message, "warning");
                } else {
                	$('.district').html('').append('<option value="0">Select Dist</option>');
                    $.each(data, function(key,valueObj){
                        $('.district').append('<option value="'+valueObj.id+'">'+valueObj.name+'</option>');
                    });
                }
            }
        });
    }

    function loadPs($this){
        $.ajax({
            type: 'POST',
            url: '{{ route('ps') }}',
            data: {
                _token: '{{ csrf_token() }}',
                id: $this.value
            },
            success: function (response) {
                var data = $.parseJSON(response);
                if (data.error) {
                    $.notify(data.message, "warning");
                } else {
                    $('.ps').html('').append('<option value="0">Select ps</option>');
                    $.each(data, function(key,valueObj){
                        $('.ps').append('<option value="'+valueObj.id+'">'+valueObj.name+'</option>');
                    });
                }
            }
        });
    }
</script>

Conclution:

Finally, we made a form that collect address from user dynamicaly in laravel.

TRAINING GROUND // REPS UNDER THE BAR

READING IS REPS. NOW GO UNDER THE BAR.

Internalize the exact mechanisms in this guide through our 6-stage drill. Flip cards, calibrate bandwidth sliders, judge architectural proposals, test commands in the terminal, and certify your knowledge with official XP and badges.

Making Dynamic Address Field on Laravel Form, for Address Collection - Laravel 8.x | TechNHIT Software Systems | TechNHIT