Django Dependent Drop Down List Example | Integration with Django Forms and Django Form Validations

[@thetruereality2]

You deserve more likes for doing this, Thank you for the effort

[@CodeBand]

Thanks a lot for the support ❤️

[@kabakiAntony]

thanks a lot, I was stumped at how to do this yesterday and today, I did not even watch the video I know it is awesome, and this is the solution I needed. Thank you.

[@adminassistancepfe2047]

Thaank you for the video. But i can't understand where did you define the form html syntax. let's suppose weh have already a form set by html, how to edit just dropdownlist ?

[@CodeBand]

Sorry for the late reply... Actually, the html markup is handled by Django Forms module as we have setup ModelForm... If its not a Django Form, then you'll have to deal with populating the data and all, Django Forms just make the process easier.

[@derekstout8183]

I don't usually comment on videos, but this was very well done. Super thorough and helped me with several roadblocks!

[@CodeBand]

Glad it helped!😊

[@user-fq2ty]

But from where do you get the cities an countries, do you declare them in a list somewhere?

[@CodeBand]

Sorry for the late reply.... Pardon me for not mentioning that in the video, actually all the data was added using django admin panel in the starting itself..

[@ankitdedhia8460]

Mate, you're a legend! Was stuck at this for a week, and now I have you!🔥🔥

[@CodeBand]

Thanks a lot :)

[@migy220]

Hi! I would like to ask which part in the video showed the inputs of Country names? and City names?

[@CodeBand]

Sorry for the late reply... I have already pushed those sample countries and cities into the DB through the Django admin panel... haven't shown that part in the video....

[@migy220]

@@CodeBand i see..thank you

[@dhananjaysingh194]

you're a legend bro! I Was stuck at this for a week

[@CodeBand]

Glad I could help, thanks!

[@dhananjaysingh194]

@@CodeBand most welcome ❤️

[@abhishekojha4047]

For a particular country if only one city is present then it should be automatically selected in the city field and if multiple cities are there then from the dropdown we will select , how to do this ? please reply sir

[@5lowToLow]

Any idea why this works with func based views but when i changed to class based view it doesnt work

[@CodeBand]

It depends on which CBV you used and how you've done the implementation

[@5lowToLow]

@@CodeBand nvm, JS for adding formset button was blocking Ajax response whenever i didnt have formset in form applied

[@shahrzadgoudarzi572]

Undoubtedly, there is the best solution in this training, thank you so much.

[@CodeBand]

Glad to hear that!

[@sona257]

Hi On 22:58 - The validation message is not showing. I followed the implementation but the form validation is not working. I can submit a form with no country or city. How do I get this validation working please? Great video. 😀

[@CodeBand]

It should show up the validation, can you double check the code with the one in repo.. github.com/akjasim/cb_dj_dependent_dropdown

[@rushabhgediya290]

Hello sir, how to put string in value like India insted of Id and my database, country content have country_id, full name, short name, phone code, when I wil change id to string than State and city not working...

[@CodeBand]

You can change the value in your views.py itself...if you are writing that logic of there...otherwise..you can change that in JavaScript side. Either way its totally possible...and also, you might need to change the logic in views.py while fetching the related/dependant objects.

[@douglasmonteiro3085]

It may be a silly question, but how do you populate the cities? and If I want to do a worldwild kinda of depente chain? regards,

[@CodeBand]

You should have the data beforehand. You can search for the country-city related data in Google. There are a lot available...😊

[@douglasmonteiro3085]

@@CodeBand yeah I got it, but where should I input that, I have tried many variabled, but just can't figure it out. Sorry about it, just a newby here hehe.

[@CodeBand]

You can input the data manually using Django Admin Panel or you can import the sql file into the corresponding database you're using...

[@kevingonzalez-yk6ye]

because I have to send the data twice to accept the value, the first time an invalid option appears and the second time it already admits the value

[@CodeBand]

Sorry for the late reply, can you elaborate a bit more ?

[@shofyankhan]

hi, your example used for selectbox, what if i want used it for input textbox.. ? ex : search username, and other field like address is filled based on username . do you have example code or reference for that ? thank you

[@CodeBand]

Yes, I do have a separate video on that... kzbin.info/www/bejne/boe8qWCZg6tkorc

[@shofyankhan]

@@CodeBand thanks.. but still.. i think select2 just for selectbox and not for input field.. and the example on the video only for 1 field (fav language) not 2 field or more..

[@CodeBand]

kzbin.info/www/bejne/Y6Cvh42mZrOEjKc This autocomplete would definitely help you out😊

[@mohanmk7102]

from where that city name country name come from is in database or code...

[@CodeBand]

From the DB...

[@albinpaulose2375]

Could please tell how it can do in django default admin panel?

[@CodeBand]

Sorry for the late reply... For Admin panel, you can override the form... stackoverflow.com/questions/10040442/override-a-form-in-django-admin

[@muhammadjonmuhamedov5201]

how we styling this fields. if I use css to this fields it doesn't work. please help me

[@CodeBand]

It should've worked for sure... Please let me know what's going wrong..

[@DC-xp9vr]

dependent dropdown works but it won't post. i don't see any error message on console log but it won't post to database. :(

[@CodeBand]

Cross check the statements in the view... there should be something which makes the prob.

[@jakebush8941]

if the city has a foreign key to country, why do we need a country field added to person? Shouldn't they all correlate to each other? This seems like we're creating more data than necessary in our tables.

[@CodeBand]

Sorry for the late reply... Yup, country can automatically be inferred from city field, but for the sake of making the form with ModelForm simpler, took this approach. But, yes, it can be accomplished with extra form field and overriding some logic.

[@skillsagewithravi]

If we will use formset factory then we have multiple fields with respective IDs then how we will use this for.....

[@CodeBand]

That's something we have to research😊

[@skillsagewithravi]

@@CodeBand yahh I got it

[@CodeBand]

@@skillsagewithravi Keep going👍🏻

[@jaykaravadra5176]

It dose't work in admin panle in my case i used dependent dropdownlist in auth model . it works only user side not admin side what can i do?

[@CodeBand]

It would definitely work regardless of user / admin. But for the admin part, you need to do some extra configurations as you need to override the default functionalities😊

[@Luqmanx96]

could you explain how you added dummy countries via the admin panel? i am completely lost atm

[@CodeBand]

That's pretty straightforward.... Since we have those models in models.py, we just need to register those in admin.py and then we will be able to see those in Admin Panel...

[@fikrimusic2234]

how to handle manytomany fields? can you give idea?

[@CodeBand]

For many-to-many fields, you might want to make the select field multiple () and then tweak the logic in forms.py

[@yasink18]

I have a question would you help me with that.. If I select Country-> INDIA, would I just get form regarding this only..

[@CodeBand]

I'm not that clear with the question. Can you repeat?😊

[@yasink18]

@@CodeBand yes.. So if I select India from drop down menu and I want input type text which is related to selected country only and if I select USA so the text type would be different as per the selected drop down list.. I hope it's clear.. 😇😇

[@CodeBand]

As far as I understand the question, you want to render different forms when you select different fields in the dropdown. I think you can do that with Django forms + AJAX, or you can do it with vanilla JS and then handle the form manually in Django.

[@boatengevans1834]

Your explanations are soo good

[@CodeBand]

Thanks a lot 😊

[@AtifKhan-ur5kh]

iam getting Key error at self.fields['x'].queryset=Models.objects.none() .. the code works well upto 2nd dropdown.. kindly help. iam new to this. thanks in advance

[@CodeBand]

Please check and confirm your code with the code in Github (Link in description)

[@CI30]

Hi! It's showing an error in Forms.py that ''No module named persons". If u can plz tell its solution.

[@CodeBand]

Sorry for the late reply, this seems like more of an import error. Kindly check whether the import paths are correct.

[@marufkhan23508]

Really blessed to get this video. Thanks to this video creator. Well done!

[@CodeBand]

Glad you enjoyed it! 😊😊

[@artemunix5223]

how to change the name of the country when choosing a language, for example en fr it

[@mukulkumar-xn2vx]

if i want to create country state city than how can i do that

[@CodeBand]

You can definitely do that, the length of the dependent chain doesn't matter, of course, if you've watched this video completely, you definitely have got the logic to do so...

[@misfarsiddeek3105]

How to style the model form or django form like your thumbnail??

[@CodeBand]

Styling is pretty much simple....You can catch the id of the field and write some css. Also, if you are using Django forms and want to have some additional attributes in the input field, you can override form class and give them the attributes.... You can get some idea from this video : kzbin.info/www/bejne/hn61kp9_Z7Jmibs

[@agriculturalassistant2210]

ജാസിമേ..,....... എന്താ ഈ കാണുന്നെ 💚😍😃👍

[@CodeBand]

Entha cheyya ashikee😊😂

[@hikmetpirmamedov5851]

Hey hope you are doing well! I have a question: I want to implement the same thing but with car manufacturer and brand (e.x if I select BMW, it gives M series and etc). What I want to ask, should I manually add all brands and manufacturers by myself? Because it will take too long. And + I am doing it on django rest where I don't use forms. How can I implement the same technology but with car brand and manufacture dependent dropdown?

[@CodeBand]

Yes you can! In case you're using DRF, you might wanna mess up with serializers...and btw, you might look into google if there are any data available for car brands and so...otherwise you might wanna add that your own. But most probably, data would be out there...😊

[@hikmetpirmamedov5851]

@@CodeBand Yeah I found the way to implement it. Now what I want to do is what you shown with forms, but with serializers. And for testing wanna use not the html form, but rest framework's own api browser, if you know what I mean)

[@CodeBand]

@@hikmetpirmamedov5851 Keep going😊

[@tramtracynguyen1621]

Thanks for the tutorial. Do you have any tutorial will print out the list if people who registered with same country or city name?

[@CodeBand]

Not yet...but you can do that with simple queries, I believe. Do a quick research on that and I'm sure you'll definitely find how to do it😊

[@prusa16]

This video is awsome my friend. I really need like this and this video is perfect for me. Thanks for effort.

[@CodeBand]

Glad it was helpful, thanks so much!

[@takbahadurshrestha1489]

Thank you Sir, very much. From dependent drop down list 'city' how to make multiple choosing option? I used "widgets = {'inclusive': forms.CheckboxSelectMultiple(attrs={'class': 'list-unstyled list-unline'}),}" but it does not work, please me.

[@CodeBand]

Try with SelectMultiple, docs here : docs.djangoproject.com/en/3.1/ref/forms/widgets/#selectmultiple

[@trevormadden4301]

Thanks a lot Man. Graet work. I learned a lot . Keep up the good work

[@CodeBand]

Glad to hear that!

[@souleymanekeita6077]

please how can i watch with better quality my pc is not performent

[@CodeBand]

Sorry for the late reply... Try downloading the video and play it on local.

[@cracknynemc8238]

Hi, I implemented your example in my project and it worked very well. But now I have a problem, I want to make another dependent list with respect to the city, for example, we already know we have the state and the city, but now I must add a locality. Try to experiment, but it just doesn't show me anything. But the truth is that the video is excellent, thank you very much for that help.

[@CodeBand]

Thanks a lot... And as far as locality, you can pretty much try the similar logic :)

[@trevormadden4301]

Thanks again man. Just wondering how I could have a few of these on my post page. It would work perfectly for a site I'm trying to build. I've tried to just double up on everything in the code but mo luck.

[@kabakiAntony]

hey, drop me a message if you still need help with this I would be happy to help.

[@ЭрикАракельян]

Nice. But how to do the same thing if i have two forms on one page and each form is depended to each other?

[@CodeBand]

Cool. Thats a good question and possibly a point to research.

[@ganeshsuresh4723]

This is awesome. Kindly create the same video for multi select where I have to select both countries with selected states ....I have used the same logic. But form is invalid ... Kindly help me

[@CodeBand]

Sorry for the late response. Thanks and regarding multi-select, it should be fairly straight forward along with the current setup.

[@ignaciobarria5043]

I implemented it in my project and it works perfectly to create, but when I want to edit it throws an error

[@CodeBand]

It should work...as I have explained both create and update correctly in the videos... Compare your code with the repository : github.com/akjasim/cb_dj_dependent_dropdown/

[@kimjay6806]

You're simply amazing dude! Keep up the good work! just subscribed :)

[@CodeBand]

Thanks for the sub!

[@rangabharath4253]

awesome as always

[@CodeBand]

Thank you and keep supporting :)

[@atikulislam2805]

Hi, I want to implement three dependent dropdowns. For example, the Second dropdown is dependent on the first dropdown and the third one is dependent on the second one. Like the country, state, and city. The state is dependent on the country and the city is dependent on state selection. How can I do so? If possible can give me the GitHub link after implementing it. Advanced thanks.

[@CodeBand]

It's totally possible, if you have watched this video, then by now, you should be able to implement that on your own, because, In this video, I have explained everything in detail about dependent dropdowns, so, it would not be much hard to implement three dep-dropdown👍🏻👍🏻

[@ayubkara1092]

i like your teaching style , it would be perfect if you add htmx method

[@CodeBand]

Thank you and great suggestion! Will try to do that.

[@packetshark]

Watch it at 0.75 playback speed if you think the speed is a bit fast to understand.

[@zhamza]

Thank you for the great tutorial and the step by step

[@CodeBand]

You are welcome!

[@rajyadav5484]

thankyou for the detailed explaination

[@CodeBand]

Glad to help you...

[@patrickknows2296]

Great. Bro can you add an export to csv to the filtered data? There's lots of tutorial out there but the export to csv their teaching exports all the data. What I am looking for is when you filtered the form, then that data is what I want to export to csv. Please use filter forms. Because I used it and not the forms or maybe both brother please

[@CodeBand]

Thanks for the idea and I will look into that brother in the future.😊

[@afsarriyan7395]

Thank you for making this amazing video. Could you please guide how to use this plus dynamic add/remove form and generate JSON ? something like dependent dropdown+dynamic add/remove fields and when user submits it just generate JSON object .

[@CodeBand]

Sorry for the late reply... For dynamic add/remove form, you can make use of Django formsets... docs.djangoproject.com/en/3.2/topics/forms/formsets/

[@jnscollier]

making html_data as a string, then looping through each object item sent from the JsonResponse as a list seems clunky / hacky. Sure it works but it's not very clean IMO. BUT, I don't know of a cleaner way. Anyone know if there is a cleaner way?

[@CodeBand]

You can pretty much serialize the data using serializers provided by Django itself(data contains some unwanted stuff...) or using some third party libs like DRF and then sent the data to the client.😊

[@penikmatyoutube6380]

how can i see the admin.py?

[@CodeBand]

There is nothing there in admin.py, I haven't configured anything related to Admin Panel. Just entered the country & city in the panel, that's it...

[@Andandonafronteira]

thanks a lot, you have helped me a lot with some projects, keep up the good work !!!

[@CodeBand]

Glad to hear that! keep going❤️

[@lotfi43dz]

Just awesome , Thank you man

[@CodeBand]

Thanks a lot man...keep going👍🏻

[@raulpinedagasch3505]

Great video

[@alimannarkkadaliparambil1761]

Awsome 👌❤️

[@CodeBand]

Thank yew :)

[@olusegunodewole4356]

Excellent!

[@CodeBand]

Many thanks!

[@freizagen]

Thank You very much.

[@CodeBand]

You are welcome!

[@demusoli]

Thank you! Great explanation

[@CodeBand]

Glad it was helpful!

[@BrendanMetcalfe]

So basically you did it in AJAZ with Javascript

[@CodeBand]

AJAX is one way to go in those cases😊

[@BrendanMetcalfe]

@@CodeBand It almost doesn't matter that it's a Django site then... its all front end work. All good! Great vid!

[@CodeBand]

@@BrendanMetcalfe Glad to hear that❤️

[@sleepingknight3832]

you are a life saver

[@CodeBand]

Thanks a lot...

[@purplejelly24]

Thank you very much for this! :)

[@CodeBand]

Very glad to hear that😊

[@misfarsiddeek3105]

Bro. Awesome. But, Please use dark themes

[@CodeBand]

Thanks a lot..and about using dark themes, it will not be that visible, I mean, in lower resolutions, it will not be clear. Thanks for the suggestion.😊

[@misfarsiddeek3105]

@@CodeBand ohh is it? Then ok bro. Coz, light theme is not comfortable for me. That's what I said it... Hehe it's Ok. You are doing good job. Keep going. We are looking forward your videos. Please if can make a video to connecting django form or model forms with interactive design. I mean using bootstrap. Bcz when we do {{form.as_p}} it's not giving interactive design. So, I need this django forms or Model forms with interactive bootstrap design. Please, make like that video. Or if u have already made one, please share me the link. Thank u. 💕❤️☺️

[@CodeBand]

I have done a video on Django forms manual rendering...check it out... kzbin.info/www/bejne/hn61kp9_Z7Jmibs Also, you can have bootstrap based styled django forms with Django Crispy Forms package...Read more on simpleisbetterthancomplex.com/tutorial/2018/11/28/advanced-form-rendering-with-django-crispy-forms.html

[@misfarsiddeek3105]

@@CodeBand❤️❤️💕 thank you

[@CodeBand]

@@misfarsiddeek3105 Keep going👍🏻

[@vinrayudu]

This is fantastic, helped me a lot, thanks for the tutorial :)

[@CodeBand]

Glad to hear that! Keep watching😊

[@vinrayudu]

@@CodeBand When nothing is selected in Country drop down I still see all the cities, how do I not see Cities when no Country is selected?

[@CodeBand]

@@vinrayudu I think there's an issue with your code... In my case, there's nothing showing in the city field, even when no country is selected.

good video mate. thank you very much. dark themes much better for screencasting.

[@CodeBand]

Glad it helped😊 and thanks for the suggestion👍🏻

[@obaydulnayeem]

Thanks a million!

[@genuinepshyco4050]

Plz help sir , i want to do the same thing on admin....waiting for your reply

[@CodeBand]

On the Django Administration Panel, you can do that by overriding a set of forms and definitions on the ModelAdmin class. Here is a bit of info. on the topic : stackoverflow.com/questions/10040442/override-a-form-in-django-admin#:~:text=You%20can%20override%20forms%20for,contrib.admin.ModelAdmin.form

[@merabetmohamed]

thank you bro awesome

[@CodeBand]

Thanks and welcome😊😊

[@md.emdadulhaque5245]

Thanks bro. Really you made very essentials tutorial. I would be glad if you make a tutorial for multiple dependence like Country, state and city and also i request you to include a filed date picker for Date of Birth field

[@CodeBand]

Great suggestion! As a sidenote, multiple dependency chains can be implemented in the same way that I did in this video with a slight logic change, you may give it a shot. And I have noted your Date of Birth suggestion. Thanks and keep supporting ❤️

[@ABMA79]

If you would start from scratch in a long video, it will be more beneficial for your viewers. I think the current explanation can be confusing to a large extent brother.

[@CodeBand]

Starting from absolute scratch might make the video very lengthy, but I have explained everything related to dropdown in detail. And the end users, would probably be persons who know the basics of Django.😊

[@ABMA79]

@@CodeBand I am trying to learn the usage of ajax with django. as for the basic, I think i have formed some kind of acceptable knowledge and I have already designed some websites through django. I am searching for a video that helps me understand the utilization of ajax with django forms. That is all.

[@CodeBand]

@@ABMA79 Oh I see, keep going👍🏻

[@bc.export5542]

Great! Thx!

[@CodeBand]

Welcome!

[@mfsdrawings8600]

Nice 👍🏻

[@CodeBand]

Thanks ✌️

[@girishmahamuni1830]

Thank you brother

[@CodeBand]

Glad to hear that😊

[@sudanbhandari7777]

thank you :) how to implement three Dependent dropdown ?

[@CodeBand]

Thanks a lot😊 Three Dependant Dropdown is also very simple, if you fully understood this video...you might have to add some extra logic for that extra field...and thats it...😊

[@sudanbhandari7777]

@@CodeBand thanks bro i did it

[@CodeBand]

Keep going👍🏻👍🏻

[@ruzzan]

Bruh this is from the blog of simpleisbettetthancomplex

[@CodeBand]

Not exactly, but the idea was inspired from sibtc😍

[@nicolaslupi3111]

Life saver

[@CodeBand]

Very glad to hear that..Thanks for watching😊

[@adwaith_5052]

aliyan malayali ano?

[@ABMA79]

Even though the explanation takes a long time for a viewer to understand because of the speed, but I would really appreciate a more detailed video on the requirements that must be available for this feature to work. But overall, great effort brother. Thanks for the time and knowledge, it is beneficial in all cases. Best regards.

[@CodeBand]

Glad to hear that...Thanks a lot and keep supporting😊😊

[@jaradc2198]

Yeah, in fact, he should just code your project for you. And while he's at it, maybe he could do your laundry and take out your trash.

[@ABMA79]

@@jaradc2198 What did I say wrong that tipped you off like that? If you can, highlight what you think was disrespectful; otherwise, I highly suggest you mind your business and never mouth off none-sense

[@jayshah651]

Thank yoy

[@CodeBand]

Welcome 😊

[@azocarsimon]

thanks!

[@CodeBand]

Welcome!

[@ivonne8412]

This is a copy of Vitor Freitas work

[@CodeBand]

I did the research based on Vitor's blog...

[@maekee]

Thanks alot, but i get stressed when listening to you talk. Calm down dude :)

[@CodeBand]

Sorry about that, will try to get better in future videos😊

[@hakimdz3358]

Good code, but the explanation is very, very bad

[@CodeBand]

Sorry to hear that... I always try hard to make the videos clear and concise.... Anyways, if you feel like so, I would definitely try to improve in the next videos...😊

[@sunu-tech]

@@CodeBand PLZ i get this Select a valid choice. This choice is not one of those available.

[@Ayyaa-j7u]

gak bahasa inggris

[@CodeBand]

ya itu

[@speaknoworforeverholdyourp1317]

Explanation gets lost because you are all over the place. Need to improve on communication skill.

[@CodeBand]

Very sorry to hear that...will try to improve communication😊

[@abirulezz]

How can we do the same using Django rest framework serializers?

[@CodeBand]

1) Make an endpoint 2) Create a ModelSerializer with field country(write-only field). 3) Make a field city using SerializerMethodField(). 4) Implement get_city() method where you can filter the queryset based upon the object you receive. This is one way of handling this. There are a lot other approaches too... Hope this helps..😊

[@abirulezz]

As per your solution, the get_city() will filter everytime there is a get request, if my understanding is correct. Don't you think we have to filter Everytime the drop-down changes(real time dynamic filtering)?

[@CodeBand]

As soon as the user selects a different value in the first dropdown, we need to select the dependant values...thats what it is...right?

[@shakthis8126]

Thanks a lot ✨

[@CodeBand]

Glad to hear that...