Laravel Dynamic Dependent Dropdown using Ajax

hello friends in this video tutorial we are going to learn how to make dynamic dependent select box or drop-down box in laravel using ajax we have already make this type of video tutorial by using PHP script but we have received lots of viewer a quest to make this tutorial in laravel also so here we have used country state and city drop-down example for understands dynamic dependent select box dynamic dependent means child select box data will be depend on selection of parent select box if we have changed parent select box then child select box data will be change now let's start discussing this topic so this is our testing database and under this we have one country state and city table in this table we have already inserted different country state and city data we will fetch data from this table and make dynamic dependent drop-down by using Ajax in laravel we have already installed laravel framework so first we want to make database connection so we have opened our 10 file in this file first we have defined database credential like host name database name username and password after this we have go to config folder and open database dot PHP file and in this file also we have defined database credential you so this way we can make database connection in laravel now we want to make controller with named dynamic dependence for this we have go to command prompt and here we have already run composure command so here we have typed this command this command will make controller with named dynamic dependent which we can see here so we have open controller file under this file first we have make index method so when we have called controller then this method will called this method will load view file in which we can see three different drop-down list box for country state and city country drop down list box will be filled with country day two and state and city drop down list box will be empty state select box will fill when we have select country and city select box will fill when we have select state for fill countries select box first on header side of controller first we have right used statement with database class by using we make query and execute query now under index method we have write dollar country list variable is equal to database class with table methods and under this we have write country state city table name by this table method we'll make simple query like select staff from country state city table after this here we have right group by method and under this we have right country column name this method will add group by clause to the query lastly we have right get method this method will execute select query and return data array object which we have store under dollar country list variable now this state we want to pass to view file so here we have write returned statement with view methods and under this we have view file name dynamic dependence this method will load dynamic dependent view file and for data here we have write with method with two argument in first argument we have write country list variable and in second argument we have write dollar country list variable this with method will add a piece of data to the view file now we have go to dynamic dependent view file so this is dynamic dependent view file in which we have already included bootstrap and JavaScript library under this far we have make country select box so here we have right select tag with attribute name and it is equal to country class is equal to dynamic and data dependent attribute is equal to state here class we will be used as selector in query code [Music] here we have also used a to attribute which denote child select box city which is state below this we have defined state select box so here we have right select name and it is equal to state class is equal to dynamic and data dependence attributes is equal to city here also we have defined class dynamic which we have also defined in country select box also and in data dependent tag we have defined child select box city which is City for City select box we have right select tag with attribute name and it is equal to city and here we have not defined dynamic class and not defined data dependent attributes for fill countries select box so here we have right at the rate for each loop with Dollar country list variable as Dollar country here country list variable in which we have defined country list under this loop we have right option value is equal to two open and close curly bracket and between this we have right dollar country variable object country here in option value tag we have print country table column data same way for option text also we have print country table column data so this way we have filled country select box now we want to set route for this controller so we have go to web page P file here we have write route class with get method with two argument like / dynamic dependent and then second argument we have write dynamic dependent class at index method so when we have write base URL slash dynamic dependent then it will called index method now we have saved this code in check output in browser so here we have right baseurl / dynamic dependent and this URL has low dynamic dependent blade dot PHP view file and here we can see three select box here we can see country select box has been filled with day two and state and city select box has not data when we have select country select box then it will fill States select and when we have select state select box then it will fill city select box data for this we have go to dynamic dependent dot blade dot PHP file and here we have right CSRF field function for handles token as much exception now we have go to query code and here we have write dollar with country and state class name dynamic with change method so when we have select country or state select box data then this code will execute under this first we have right if statement and under condition we have right dollar with this selector with value method this condition will check selected option has value if that option has value then it will execute if block of code under this block we have right select variable is equal to dollar this with attribute methods and under this we have righted this code will fetch value of it attribute and store in to select variable below this we have write value variable is equal to dollar this with value method this code will fetch value of selected option and store into value variable after this we have right dependent variable is equal to dollar this with j2 method and under this we have right date a dependent attribute name in data-dependent attribute we have store name of child select box so in country day to attribute we have store state and in state select box we have store city child select box hidden name now we have write underscore token variable is equal to dollar with input name is equal to token with value method this code will fetch value of input fields name is underscore token this field will be generated by using this CSRF field function and it is required while we have using post method for send data to laravel controller now we have start right Ajax request and under this first we have right URL option set to route methods and under this we have right dynamic dependent controller name dot fetch method so here we have send requests to dynamic dependent controller class fetch method below this we have right second option and here we have right method option and here we have used post method for send data to server in third option we have write data option and under this option we can define which data we want send to server so here we have write select value underscore token and dependent variable lastly we have write success callback function this function has been called if request completed successfully and it will received data which we can access from this result variable under this function we have write dollar with select box in which we can get from this dependent variable with HTML methods and under this we have write result variable so when dependent variable value will be stayed then it will fill States select box J - and when dependent variable value will city then it will fill City select box data now we have go to dynamic dependent controller and here we have create fetch method with request argument this method will handle Ajax requests under this first we have right dollar select variable is equal to dollar request variable with get methods and under this we have right select variable this method will received select variable data which we have store under dollars select variable below this we have right dollar value variable is equal to dollar request variable we'll get method and under this we have right value variable this method will received value variable data which we have store under dollar value variable after this we have arright dollar dependent variable is equal to dollar request variable with get methods and under this we have write dependent variable this method will receive dependent variable data which we have store under dollar dependent variable in this variable we have storied of child select bots now we have right dollar date variable is a quilted database class with table methods and under this we have right country state city table name this table method will make select query like select staff from country state city table after this we have right where methods and under this we have right dollar select variable and dollar value variable in dollar select variable we have store table column name like country States or City which we can get from select box it'd violate Jack's request and in value variable we have store value of selected option of country or state or city select box and this where method ad where Clause inquiry after this we have right group by method and under this we have dollar dependent variable in which we have storied of child select box which we have get via Ajax request and this group by method ad group by clause to the query lastly we have right get method and this method will execute query and return result in array of object which we have store into dollar dative variable now we have right dollar output variable is equal to option tag with value is equal to blank and in option text we have right select dollar dependent variable you after this we have right for each loop and under can we have rightt dollar date variable as dollar row variable by using loop we can fetch data from dollar data variable under this loop we have a right dollar output variable and under this variable we have a penned a CH tml code like option tag with value method and under this we have right dollar o with dollar dependent variable under this dollar dependent variable we have store child select box name and here we have used value of that variable as table column name in option text also we have write dollar row with dollar dependent variable here also we have used value of dollar dependent variable as table column name this way we have store data in dollar output variable now we want to send to Ajax requests so here we have write Ekans statement with dollar output variable now we want set root of this fetch method so in web dot PHP file here we have write root class with post method under this method we have right / dynamic dependent controller name / fetch method in second argument we have right dynamic dependent class at the rate fetch method after this we have right name methods and under this dynamic dependent dot fetch method this is for root define an ajax request and here we have send requests to fetch method of dynamic dependent controller class now here our code is ready so we have saved this code in check output in browser friends in browser we have write base URL / dynamic dependent controller class and press ENTER so on web page we can see three select box like country state and city on webpage here we can see country select box has been filled with country day two and state and city select box has no data so now we have select country United State of America and now we have click on state select box but now state select box has been filled with American state data and in this we can see list of American state now from American state list we have select New York State after selecting New York State in city drop down list box we can see that it has been filled with New York State city list so this way all dynamic select box data has connected with value of its parent select box if you have developed any web application and in that you have used category subcategory then add time also you can follow this source code in that subcategory select box data has been filled when we have select category so in sub category select box has been filled with particular category data so using of dynamic dependent select box has been very useful feature and here value of child select box has been based on value parent select box and here we have use Ajax with laravel then child select box data has been filled without refresh of web page if you have any query regarding this video tutorial part please comment your query in comment box and if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 99,970

Keywords: laravel dependent dropdown, laravel dependent select, dependent dropdown using ajax, dynamic dropdown in laravel, ajax country state city dropdown, laravel, jquery ajax categories and sub categories, select dropdown, country state city drop down list using ajax in laravel, php laravel onchange select, laravel ajax onchange select box, laravel dropdown from database, populate select box from database laravel ajax, php larave ajax fill dropdown value

Id: c7-HkztGahM

Length: 18min 58sec (1138 seconds)

Published: Tue Mar 20 2018