显示三个模型表单并使用django中的一个按钮提交

Question

I have a complex and common required scenario in case of web pages/web development.

So i have three models like below

models.py

class model_a(models.Model):
    name_a = models.CharField(max_length=256)

class model_b(models.Model):
    forign_key_to_a = models.ForeignKey(model_a)
    name_b = models.CharField(max_length=256) 

class model_c(models.Model):
    forign_key_to_b = models.ForeignKey(model_b)
    name_c = models.CharField(max_length=256)

forms.py

class Aform(ModelForm):
    model = model_a

class Bform(ModelForm):
    model = model_b

class Cform(ModelForm):
    model = model_c

So i have above models and forms , now i need to display all of them in a single page like

First display Aform 
Second display Bform 
      Here the user should be able to create multiple Bform's records for Aform
Third display Cform 
      here the user should be able to create multiple Cform's records for Bform

I am sorry if my explanation is bad, finally what all my intention is to add the functionality like model_a can have multiple model_b records, and model_b can have multiple model_c records something like below(I can't show u the design but i hope i explained the required functionality)

name_a :

   name_b(first record):
         name_c(first record):
         name_c(second record):
         name_c(third record):
   name_b(second record):     
         name_c(first record):
         name_c(second record):
         name_c(third record):
   name_b(third record):     
         name_c(first record):
         name_c(second record):
         name_c(third record):

So can anyone please let me how to add multiple records on a single page and submit with single button

For adding the multiple records to a model by creating the forms dynamically i have tried using Django Formsets and jquery and i was facing this error here (of course this is another question but want to let u know what i have done in case of adding ,multiple records for a single model)

Answer 1

You can add multiple forms to the context and access them in the template as follows:

<form action="" method="post">
    {% csrf_token %}
    {{ a_form.as_p }}
    {{ b_form.as_p }}
    {{ c_form.as_p }}
    <input type="submit" value="Submit" />
</form>

Then in the view you'd pull them out as follows:

a_form = Aform(request.POST)
b_form = Bform(request.POST)
c_form = Cform(request.POST)

Edit: I just re-read your question and saw the part about needing multiple b_form's and c_form's on the page. You could do that with some jQuery to copy the empty when it's needed.

<button class="b_form_trigger">Add B Form</button>
<div class="hidden_b_form">{{b_form.as_p}}</div>
var b_form_counter = 0;
$('.b_form_trigger').click(function(){
    $(TARGET_ELEMENT).append($('.hidden_b_form > *').clone());
    // Then you will need to rename all of the inputs
    $(TARGET_ELEMENT).find('input').each(function(){
        // Need to add a prefix to the name field so we know what form we have.
        $(this).attr('name', 'b-form-'+b_form_counter+$(this).attr('name'));
    });
});

Then in your views.py file you can access each of the forms like this:

counter = 0
b_forms = []
while 'b-form-%sname_c' % counter in request.POST:
    b_forms.append(Bform(request.POST, prefix="b-form-%s" % counter))
    counter += 1

You'll likely want to do something a bit more robust to support adding and removing of the forms, but this how I've been able to do this in the past.