Django Dependent Drop Down List Example | Integration with Django Forms and Django Form Validations
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- In this video, we are gonna be implementing the dependent drop down list in Django. We will be using a real time example of country-city dependency chain where the city depends upon the selected country. We will integrate everything with Django forms along with form validations. We will also show the problems when it comes to dealing with creating and updating this form and we will also solve them in the tidiest manner possible. Everything is totally integrated with the database and we will show them in the Django admin panel too. With the same Django dependent drop down list logic, you can build more complex dependency chains like country-state-city dependency chain seamlessly. In the front-end, we will use jQuery to make the AJAX request to Django backend.
Subscribe | Code Band
Github Repo : github.com/akj...
Django Relationships (Foreign Key Reverse Relationships inside the video and article) :
• Django Relationships |...
docs.djangopro...
#djangodependentdropdown #django
Other videos in Code Band:
Build a Weather App in Django | Scrape Weather Data from Google | Beautiful Soup | Python Requests : • Build a Weather App in...
Django Select2 Tutorial | Django Dropdown | Django ajax Dropdown | Django Search and Filter : • Django Select2 Tutoria...
Django Shell Plus | Advanced Django Shell | Django Shell Commands | Django Shell Tutorial : • Django Shell Plus | Ad...
Django Autocomplete with jQuery UI | AJAX | Search | Filter from Database | Tutorial | Code Band : • Django Autocomplete wi...
Django select_related Examples |Django select_related and prefetch_related |Django n+1 Query Problem : • Django select_related ...
Django Seed Data into Database Models | Django Faker | Django loaddata | Django Dummy Data : • Django Seed Data into ...
3 Cool Django Features that Django Developers are Not Aware of : • 3 Cool Django Features...
Build a Weather App in Django | Scrape Weather Data from Google | Beautiful Soup | Python Requests : • Build a Weather App in...
Django Custom User Model | Email as Username | Phone as Username | Authentication Example |Code Band : • Django Custom User Mod...
Playlist | Django Authentication | The easiest and actual way of doing it : • Django Authentication ...
Playlist | Django Relationships | Explained with Example by Code Band : • Django Relationships |...
Custom Model Manager & Model QuerySet in Django : • Custom Model Manager &...
Render Django Form Manually : Make Custom Form with Form Validations - • Render Django Form Man...
Generic Class Based Views in Django | Introduction & Create View in Django | Learn by Example | CRUD : • Generic Class Based Vi...
How to Deploy Django Project on Heroku for Free : • How to Deploy Django P...
Connect Django with MySQL : • How to Connect Django ...
Instagram Automation using Python : • Instagram Automation u...
Top 5 Programming Languages to Learn in 2020 : • Top 5 Programming Lang...
:) You Can Find Me On:
My Website - jasim.tech/
Linkedin - / akjasim
Github - github.com/akj...
Facebook - / jasimakjasim
Twitter - / akjasim
Instagram - / jasim_ak
You deserve more likes for doing this, Thank you for the effort
Thanks a lot for the support ❤️
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. 😀
It should show up the validation, can you double check the code with the one in repo..
github.com/akjasim/cb_dj_dependent_dropdown
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 ?
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.
Hi! It's showing an error in Forms.py that ''No module named persons". If u can plz tell its solution.
Sorry for the late reply, this seems like more of an import error. Kindly check whether the import paths are correct.
Thanks alot, but i get stressed when listening to you talk. Calm down dude :)
Sorry about that, will try to get better in future videos😊
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. :(
Cross check the statements in the view... there should be something which makes the prob.
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
Sorry for the late reply, can you elaborate a bit more ?
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...
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.
Bruh this is from the blog of simpleisbettetthancomplex
Not exactly, but the idea was inspired from sibtc😍
So basically you did it in AJAZ with Javascript
AJAX is one way to go in those cases😊
@@CodeBand It almost doesn't matter that it's a Django site then... its all front end work. All good! Great vid!
@@BrendanMetcalfe Glad to hear that❤️
from where that city name country name come from is in database or code...
From the DB...
Thank yoy
Welcome 😊
please how can i watch with better quality my pc is not performent
Sorry for the late reply...
Try downloading the video and play it on local.
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.
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.
I don't usually comment on videos, but this was very well done. Super thorough and helped me with several roadblocks!
Glad it helped!😊
Could please tell how it can do in django default admin panel?
Sorry for the late reply...
For Admin panel, you can override the form...
stackoverflow.com/questions/10040442/override-a-form-in-django-admin
But from where do you get the cities an countries, do you declare them in a list somewhere?
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..
Any idea why this works with func based views but when i changed to class based view it doesnt work
It depends on which CBV you used and how you've done the implementation
@@CodeBand nvm, JS for adding formset button was blocking Ajax response whenever i didnt have formset in form applied
if i want to create country state city than how can i do that
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...
Good code, but the explanation is very, very bad
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...😊
@@CodeBand PLZ
i get this
Select a valid choice. This choice is not one of those available.
Watch it at 0.75 playback speed if you think the speed is a bit fast to understand.
ജാസിമേ..,....... എന്താ ഈ കാണുന്നെ 💚😍😃👍
Entha cheyya ashikee😊😂
This is a copy of Vitor Freitas work
I did the research based on Vitor's blog...
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
Please check and confirm your code with the code in Github (Link in description)
Thank You very much.
You are welcome!
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
I implemented it in my project and it works perfectly to create, but when I want to edit it throws an error
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/
This video is awsome my friend. I really need like this and this video is perfect for me. Thanks for effort.
Glad it was helpful, thanks so much!
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
Sorry for the late response.
Thanks and regarding multi-select, it should be fairly straight forward along with the current
setup.
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.
Thanks a lot... And as far as locality, you can pretty much try the similar logic :)
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.
Try with SelectMultiple, docs here : docs.djangoproject.com/en/3.1/ref/forms/widgets/#selectmultiple
how can i see the admin.py?
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...
how to change the name of the country when choosing a language, for example en fr it
Mate, you're a legend! Was stuck at this for a week, and now I have you!🔥🔥
Thanks a lot :)
how we styling this fields. if I use css to this fields it doesn't work. please help me
It should've worked for sure... Please let me know what's going wrong..
Great! Thx!
Welcome!
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?
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😊
Awsome 👌❤️
Thank yew :)
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
Thanks for the idea and I will look into that brother in the future.😊
Plz help sir , i want to do the same thing on admin....waiting for your reply
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
Thanks a lot ✨
Glad to hear that...
Thanks for the tutorial. Do you have any tutorial will print out the list if people who registered with same country or city name?
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😊
good video mate. thank you very much. dark themes much better for screencasting.
Glad it helped😊 and thanks for the suggestion👍🏻
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.
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👍🏻👍🏻
could you explain how you added dummy countries via the admin panel? i am completely lost atm
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...
thanks!
Welcome!
Life saver
Very glad to hear that..Thanks for watching😊
I have a question would you help me with that.. If I select Country-> INDIA, would I just get form regarding this only..
I'm not that clear with the question. Can you repeat?😊
@@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.. 😇😇
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.
Explanation gets lost because you are all over the place. Need to improve on communication skill.
Very sorry to hear that...will try to improve communication😊
i like your teaching style , it would be perfect if you add htmx method
Thank you and great suggestion! Will try to do that.
How to style the model form or django form like your thumbnail??
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 : th-cam.com/video/PMRalI2M3SY/w-d-xo.html
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 .
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/
gak bahasa inggris
ya itu
Thanks a lot Man. Graet work. I learned a lot . Keep up the good work
Glad to hear that!
how to handle manytomany fields? can you give idea?
For many-to-many fields, you might want to make the select field multiple () and then tweak the logic in forms.py
Hi! I would like to ask which part in the video showed the inputs of Country names? and City names?
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....
@@CodeBand i see..thank you
Nice. But how to do the same thing if i have two forms on one page and each form is depended to each other?
Cool. Thats a good question and possibly a point to research.
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
Yes, I do have a separate video on that...
th-cam.com/video/8VYx-cNF1lU/w-d-xo.html
@@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..
th-cam.com/video/-oLVZp1NQVE/w-d-xo.html
This autocomplete would definitely help you out😊
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.
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.😊
@@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.
@@ABMA79 Oh I see, keep going👍🏻
If we will use formset factory then we have multiple fields with respective IDs then how we will use this for.....
That's something we have to research😊
@@CodeBand yahh I got it
@@skillsagewithravi Keep going👍🏻
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?
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...😊
@@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)
@@hikmetpirmamedov5851 Keep going😊
You're simply amazing dude! Keep up the good work! just subscribed :)
Thanks for the sub!
Thanks a million!
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,
You should have the data beforehand. You can search for the country-city related data in Google. There are a lot available...😊
@@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.
You can input the data manually using Django Admin Panel or you can import the sql file into the corresponding database you're using...
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.
thanks a lot, you have helped me a lot with some projects, keep up the good work !!!
Glad to hear that! keep going❤️
Undoubtedly, there is the best solution in this training, thank you so much.
Glad to hear that!
Great video
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.
hey, drop me a message if you still need help with this I would be happy to help.
thankyou for the detailed explaination
Glad to help you...
Really blessed to get this video. Thanks to this video creator. Well done!
Glad you enjoyed it! 😊😊
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
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 ❤️
awesome as always
Thank you and keep supporting :)
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?
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.😊
Thank you for the great tutorial and the step by step
You are welcome!
Thank you very much for this! :)
Very glad to hear that😊
you're a legend bro! I Was stuck at this for a week
Glad I could help, thanks!
@@CodeBand most welcome ❤️
How can we do the same using Django rest framework serializers?
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..😊
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)?
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?
Nice 👍🏻
Thanks ✌️
Your explanations are soo good
Thanks a lot 😊
thank you bro awesome
Thanks and welcome😊😊
you are a life saver
Thanks a lot...
Thank you brother
Glad to hear that😊
Just awesome , Thank you man
Thanks a lot man...keep going👍🏻
aliyan malayali ano?
This is fantastic, helped me a lot, thanks for the tutorial :)
Glad to hear that! Keep watching😊
@@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?
@@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.
Excellent!
Many thanks!
Bro. Awesome. But, Please use dark themes
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.😊
@@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. 💕❤️☺️
I have done a video on Django forms manual rendering...check it out...
th-cam.com/video/PMRalI2M3SY/w-d-xo.html
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
@@CodeBand❤️❤️💕 thank you
@@misfarsiddeek3105 Keep going👍🏻
Thank you! Great explanation
Glad it was helpful!
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.
Glad to hear that...Thanks a lot and keep supporting😊😊
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.
@@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
thank you :)
how to implement three Dependent dropdown ?
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...😊
@@CodeBand thanks bro i did it
Keep going👍🏻👍🏻