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
1 2 3 4 5 6 7 8 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<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> |
here i used theā¦ Read More »