automatic dropdown box loading using laravel and jqueryLearning Curve- Perfect Tutorial for the beginers | Learning Curve- Perfect Tutorial for the beginers

Automatic dropdown box loading using Laravel and Jquery/Ajax

Automatic dropdown box loading using Laravel and Jquery/Ajax Below are the files required for dropdown box loading based on another dropdown selection.Here if we select one country dropdown, then state dropdown will load automaticaly. Routes,Models,view,controller files are listed below Routes.php

<?php
Route::get('/', function () {
    return view('welcome');
});
Route::get('dropdown', 'WelcomeController@dropdown');
Route::post('getStateUsingCountryId', 'WelcomeController@getStateUsingCountryId');

?>

<?php

Route::get('/', function () {

return view('welcome');

});

Route::get('dropdown', 'WelcomeController@dropdown');

Route::post('getStateUsingCountryId', 'WelcomeController@getStateUsingCountryId');

view file will be in the resource folder views/dropdown/drodown.blade.php

<html>
	<head>
		<title>Automatic dropdown</title>
		<meta name="csrf-token" content="{{ csrf_token() }}" />
		<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

		<style>
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				color: #B0BEC5;
				display: table;
				font-weight: 100;
				font-family: 'Lato';
			}

			.container {
				text-align: center;
				display: table-cell;
				vertical-align: middle;
			}

			.content {
				text-align: center;
				display: inline-block;
			}

			.title {
				font-size: 96px;
				margin-bottom: 40px;
			}

			.quote {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div class="title">Automatic dropdown in laravel</div>
				 <div class="form-group">                        
                    {!! Form::select('country', (['' => $placeholder_country] + $country),null,['id'=>'country','class'=>'form-control','onchange'=>'display_state()']) !!}
                    <span id="states_error"></span>
                </div>   
				 <div class="form-group">      
				<select name="state" id="state" class="form-control state_display_box " style="clear:both">
                                    <option value="">Select State</option>
									</select>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
function display_state(){     
var siteUrl ='{{url("getStateUsingCountryId")}}';
  
        var country_id = $('#country').val();
        
        if (country_id == "") {
            $('.state_display_box').html('');
            $('.state_display_box').html('<option value="">Select State</option>');
        } else {
            var dataString = 'country_id='+country_id;
            $.ajax({
                url: siteUrl,
                async: true,
                type: "POST",
                data: dataString,
                dataType: "html",
                beforeSend: function(){
                    $('.state_display_box').html("<option>Please wait, state is loading... </option>");
                },
                success: function (data) { 
                    $('.state_display_box').html('');
                    $('.state_display_box').html(data);
                }
            });
        }
    }
	
</script>

<html>

<head>

<title>Automatic dropdown</title>

<style>

body {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

color: #B0BEC5;

display: table;

font-weight: 100;

font-family: 'Lato';

}

.container {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.content {

text-align: center;

display: inline-block;

}

.title {

font-size: 96px;

margin-bottom: 40px;

}

.quote {

font-size: 24px;

}

</style>

</head>

<body>

<div class="title">Automatic dropdown in laravel</div>

{!! Form::select('country', (['' => $placeholder_country] + $country),null,['id'=>'country','class'=>'form-control','onchange'=>'display_state()']) !!}

</div>

<option value="">Select State</option>

</select>

</div>

</body>

</html>

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

function display_state(){

var siteUrl ='{{url("getStateUsingCountryId")}}';

var country_id = $('#country').val();

if (country_id == "") {

$('.state_display_box').html('');

$('.state_display_box').html('<option value="">Select State</option>');

} else {

var dataString = 'country_id='+country_id;

$.ajax({

url: siteUrl,

async: true,

type: "POST",

data: dataString,

dataType: "html",

beforeSend: function(){

$('.state_display_box').html("<option>Please wait, state is loading... </option>");

success: function (data) {

$('.state_display_box').html('');

$('.state_display_box').html(data);

}

});

}

</script>

here i used the… Read More »