I would like to generate 4 drop down forms using django model forms

Question

I would like to create a multi-level drop-down hierarchy in Django using Models.And the information should be updated dynamically without reloading the page. I know that I should use Ajax, but is it possible to create a template from the following models:

class Pays(models.Model): nom_pays=models.CharField(max_length=45) def__str__(self): return self.nom_pays class Province(models.Model): nom_province=models.CharField(max_length=100) pays=models.ForeignKey(Pays,on_delete=models.CASCADE) def__str__(self): return self.nom_province class Ville(models.Model): nom_ville=models.CharField(max_length=100) province=models.ForeignKey(Province,on_delete=models.CASCADE) def__str__(self): return self.nom_ville class Commune(models.Model): nom_commune=models.CharField(max_length=100) ville=models.ForeignKey(Ville,on_delete=models.CASCADE) def__str__(self): return self.nom_commune 

Is it possible to create this model from django model forms or should I create manual forms with HTML?

Answer 1

First of all, you should know that we do not use model forms, because this is the only way to do something. The goal is time gain. Therefore, it is impossible to do all this staff. Personally, when I encounter these kinds of situations, I always create the form manually, but fill out only the first or highest model of the hierarchy, and for the rest I will use Ajax.For For example:

 def myController(request): #To have the list of all you pays pays=Pays.objects.all() #Here you pass your pays object in your form template by a dictionnary return render(request,"template/your_form_template.html",{"your_dic_variable":pays}) 

And then in your template:

 <select name="myChoice" id="choice"> {% for pays in your_dic_variable %} <option value={{ pays.id }}>{{ pays.nom }}</option> {% endfor %} </select> .... 

And if you have another option, you can call the onChange() method to send an Ajax request to dynamically update the next list. As you said, if you know that you are using Ajax, you will have something like this:

 $(function(){ $('#choice')change(function() { //you can send ajax somewhere here }); }); 

Or, another idea is that, imagine there are 3 models:

 class FirstModel(models.model): field_m1=models.CharField(max_length=20) class SecondModel(models.model): field_m2=models.CharField(max_length=20) first_model=models.ForeignKey(FirstModel,on_delete=models.CASCADE) class ThirdModel(models.model): field_m3=models.CharField(max_length=20) field2=models.CharField(max_length=20) field3=models.CharField(max_length=20) second_model=models.ForeignKey(SecondModel,on_delete=models.CASCADE) 

As in ThirdModel , fields that depend on the two previous models, second_model , you can use model forms to have only 3 fields: fields_m3 , field2 and field3 . They will be generated by auto:

 class ThirdModelForm(froms.ModelForm): class Meta: model=ThirdModel fields=['fields_m3','field2','field3'] 

And in your template you will do this:

 <form> {{ csrf_token }} <!-- Data form first model,but you must have a controller send send the data --> <select id="choice"> {% for f_model in your_dic_variable %} <option value={{ f.id }}>{{ f.column }}</option> {% endfor %} </select> <!-- second model will be populated with ajax form the choice1 id --> <select id="choice2"> {% for f_model in your_dic_variable %} <option value={{ f.id }}>{{ f.column }}</option> {% endfor %} </select> <!-- second dropdown will be populated with ajax form the choice1 id --> <select id="choice2"> <!-- data here will come from ajax according to the first model id value --> </select> <!-- third dropdown will be populated with ajax form the choice2 id,and it is the second_model field of ThirdModel data --> <select id="choice2"> <!-- data here will come from ajax according to the second model id value --> </select> {{ ourform.as_p }} <button type='submit'>Record</button> </form> 

I did this too and it works great