Dependent Drop Down in Laravel | How to Create Dependent Select box in Laravel | jQuery depedent

hello everyone welcome back the video is about how we can create the dependent drop-down in the laravel nine so let me show you what is the exact example so we are going to first add the select country drop down and when we choose to some country so according to this country these state drop down will be filled and then when i choose some states so according to this state these cities will be filled right so we are going to make this dynamic so when we choose this so it will be filled so it's uh we are going to use this uh for jquery to send our request to the server and then receive the response so this is a quick example so you can also get this from this uh github repositories which i have almost 1k stars so i'm closing this one and how you can see the dummy data how you can get the country states all over the world so this is the website so you can get this from there so let's click on this download example and subscribe and then you can download the countries uh state and cities so i downloaded it from there so there are three files so let me show you the i think i uh delete them one so let me go to the my downloads and here i have this one okay so i opened this here so let me close this one and here this is the city x sql this is a database table so you need to simply import this into the database so in my case i have imported this here so let's go here and click on that system so in this web system i added this cities states and countries but in this case this countries is not working for some reasons so that's why i created it my in my own way so i created a simple migration with the model of country and then i stored these name stored these columns and then how i seeded them here so this is the array so i pre-filled i added i uh first to create this array yeah you can get this from the github repository so it's uh available it's publicly available and then i'm inserting this and then i execute this seeder so then these records are added in my database so let me open the country so now these are filled with the country with their code and their phone code okay so let's get started so let me show you that uh i am working on my client project and this is my client project so whenever user click user is subscribing for any plans so client want to get its information like billing information so here client want to get its country state and city so by by default it's working but client want to get these details so how we can add this drop down here so i'm shooting this in the real environment because people learn a lot from these real in real examples so that's why i'm shooting this in the live video okay so here this hack the stuff is explained very well in gtah media so it's explained very well to how many steps are there so first you need to create application then database configuration we already did this dump data into the database so we already seeded this data and then next step we need to create the controller so let's go here and create the controller so we are going to create the controller so we are going to implement this on the user side so that's why i'm creating this in the user name space so let me open the controllers and this one is the user so i'm going to create this here so here you need to type in the blog it's mentioned that what is the controller name its name that drop down controller but it's not descriptive so i'm going to make this descriptive so let's name this pfp artisan make controller and then i'm going to first to specify the username space and here i'm going to name this country state and city controller so i know it's going long but it's more descriptive than drop down controller so country state city controller and that's it okay hit enter and yes this controller is created right it's there so what's next next we need to create these method inside this controller so let's go here and let me like this right okay so copy this method and here i'm going to paste this right and here you need to specify where db you can define like this one but i'm going to import this at the top so it's totally upon you you can do this in your own way okay so my db is added at the top and then i'm going to uh not going to return this to a view i'm going to just to return these countries same as we are getting from the database because i'm going to use this in a different view because i'm going to use this in the checkout view that's why i'm returning these countries so you can return this in the json format but i am doing this so not json because laravel by default return it as json okay so let's go to the next method and copy this one so here you can also name this like get countries it's more descriptive so you know that this is a good convention to use descriptive things so you don't need to remember every time okay let's go to the third method and copy this one okay paste here and here you need to don't need to specify db slash and cities state so i have already added these in my database so it's a cities and let me it's the states and what's the next next would be the countries and cities okay so now what's next let's go here and here you need to create your route so let's go here and copy them from there and i'm going to my web.php file so i have a lot of routes in your case you don't have any routes like me so i'm going to make this in the user section so after this route i'm going to paste them like this one and we are in the level 9 so i'm going to refactor no we are in the level 8. sorry for that uh this is the project so i built this also in the level 9 but this is the laravel 8 project that's why i'm doing the repeated controller and sorry about that i mentioned that this is a larval 9 video so this is basically level 8 video so i will change the title okay so here you need to specify your controller so in our case it's a country city and state controller right hit enter so it will be automatically added at the top so it's a this one right so let's go to the controller it's this one so let me copy this one and replace with this one and here i'm going to make this so country get countries so also make this countries i think i made this country simple now i made this country that's good okay so now i need to name this so get countries okay so let me copy this one i'm also going to change it so name get countries or we can say that countries are states and then this would be also uh it would be a cities right so you can also simply say that not get i'm going to use this without the get okay so now when i call this country state so this will be called and these define methods here so now the time is to build this so here we need to add the jquery and bootstrap so i have already added in my project so if there is some error so we are going to fix this issue so let me copy these drop down first i need to copy the country and go to our this checkout plate and here i'm going to let me show you that this checkout plate so i'm going to add this after this billing detail so this is billing details so i am adding this here okay so after this i need to add two more drop down so this one is uh for state and this one is varsity and these are and load it from the jquery so we'll add this javascript code so let's copy this same and go to the bottom and here we have a javascript so i'm going to create a new script tag and here i'm going to add this javascript to paste it and then and yes we added this so let me also make this a little bit too aligned so make this properly align okay now it's aligned and now i'm going to first to choose the country so here i need to first to return the countries inside this drop down so i'm using the subscription controller to use this checkout to render this check out so let me go to the subscription controller so it's a subscription controller and in the subscription i need to find the checkout where i am returning the checkout so this one is a check out so first i am getting checking the plans and then i am returning to this view so here i need to first get the countries and then i am going to and then i'm going to return this to a view so how can i get the countries so even i can use this in the same controller like i don't need to specify this method here so i can create them in my own controller so i don't want to create multiple controllers because i have already many controllers so i'm going to make this in the administrator function so here i'm going to change you it's public to private because i want to make them available only in the in my this controller so if you want to make them global so you can also add this in your helper so if you are not familiar with this helper so you can get the function from the helper globally by registering this into your composer.json file okay so we are in the checkout so let me go to the checkout and yes it's this one so here i'm going to first and check that i want to return some countries so how can i get the country so i'm creating a countries variable and here i am going to call my this method which i define get countries in my controller this is a private method so i am not going to use this country state controller right so let me also change this in my web.php file so here i'm also going to use this subscription controller so let me copy this subscription so i'm going to change this here so i created these in my controller so let me close this one and go back so this one is a get country so let me die down that we are loading the countries or not so countries save this one and go back and give it a refresh and check that we are returning the country and yes we are returning two four six countries so it's working so let's pass them into the view so i'm going to add this here right so add them here like this one and yes now it will be available in our this check out so this will be this drop down will be loaded with the countries so let's go here and give it a refresh and check that we have any error so then we are going to fix this if we don't have any error and it's returning get state not defined why because we removed the get so let's fix this in the jquery so it's throwing this issue from the jquery so it's a we need to make this states user dot states because we added this in the user user as uh prefix okay so here we need to add the user cities and then what's the next that's it i think country will be automatically loaded so give it a refresh and do it and yes it's working and it's displaying like this one so let me fix this at the bootstrap class in the country drop down so go to the top and here i need to add this so a simple class or form control which is a bootstrap class so hope you are familiar with this one so let me copy this one and also add them into other drop down so here and here save this one give it a refresh and wait for a moment and yes now these are looking good so these are by default empty so if i select any country like i'm choosing a one is on so these states are not pre not prefilling so let's open the console and check that we are getting an error or not so let's go here and it says dollar dot ajax is not defined function so why it's default behaving like this because of boots because of this jquery cdn i think i need to add this so i'm using this slim jquery so let me replace with this jquery so let me go to the top and oops whites get refresh okay so here i need to use this so jquery main dot js so let me copy this and go here and let me replace with this one so now let's get refresh and yes it's reloading and let's click on the select the first country and then we are going to choose its states okay it's still loading and let's complete it click on algeria click on this and it's still throwing that country id error so let's go here and what's the actual error so it says that get states not does not exist in the subscription controller get state does not exist hmm so why it's throwing this error because so let's go here and in the subscription controller we created them uh as public as private method so we need to change this to a public method why because we are different getting this from the or we are hitting them from the controller so that's why we need to oh we don't we are not hitting them from the controller so we are doing we are sending the request to the controller like let me uh clarify it so i'm sending this request to from the jquery on which route so let me find this so here i'm sending the when i changing this country so i'm sending a hx request to user states with the country and then i'm going to make this a get route and here i'm going to get the countries and append them on the city drop down so it's a state drop down not city and then in the subscription controller so it's get straight and yes it's returning them so let's go back and give it a refresh and check that we are what we are getting the exact error so let me also check oh my video size is going very bigger so i'm very sorry because our this video is going bigger because we are we are shooting this in the live environment so that's why it's taking your time so give it a refresh and yes our now states are filled there is no errors because we change this private to public so now it's accessible from this route so click on it and yes our cities are also pre-filled so that's great we successfully did this so let's click on any other state like my stay my country and let's click on this and yes now it fill the state so i'm choosing this punjab and now it will pre-fill the cities great now it's filled the cities so that's very amazing so hope you uh if you get an idea that how you can implement this in your laravel application so if you are familiar if you are interested to learn more about the laravel subscribe the youtube channel so i am shooting the videos on the daily basis and also uploading the laravel tips and tricks so you can get the regular tips so subscribe the youtube channel and i will meet you in the next one bye

Channel: Career Development Lab

Views: 31,039

Keywords: dynamic drop down, select box dynamic change, laravel dependent dropdown, dependent dropdown using ajax, dynamic dropdown in laravel, ajax country state city dropdown, country state city drop down list using ajax in laravel 9, php laravel onchange select, laravel ajax onchange select box, select box from database laravel ajax, laravel 8 dependent country state city dropdown with ajax, php larave ajax fill dropdown value, how to create dependent drop down in laravel

Id: CBCo5wgiPs8

Length: 18min 7sec (1087 seconds)

Published: Sat Mar 12 2022