So I have set up the following codes for sample from followed by inline formset of its foreign key, sample detail. I also added some dynamic feature to it so that you could add more rows for the formset via Jquery. I got the Jquery section from http://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax. I tried both implementation but it appears to have the same result. I am wondering if I did something wrong in the view.
views.py
def project_detail (request, project_id):
project = Project.objects.get(id = project_id)
sample_form = SampleForm(request.POST or None, request.FILES or None, instance = project)
SampleInlineFormSet = inlineformset_factory(Sample, SampleDetail, form=SampleDetailForm, extra=1, can_delete = False)
formset = SampleInlineFormSet(request.POST or None, request.FILES or None, prefix="nested")
if request.method == "POST":
if 'sampleform' in request.POST:
if sample_form.is_valid() and formset.is_valid():
sample_temp = sample_form.save()
sample = Sample.objects.get(pk = sample_temp.pk)
objects = formset.save(commit=False)
for object in objects:
object.sample = sample
object.save()
messages.success(request, "Sucessfully Created New Sample Log" )
return HttpResponseRedirect(reverse('projstatus:project_detail', args=(project_id,)))
context = {'project' : project, "sample_form":sample_form, 'formset' : formset}
return render(request, 'projstatus/detail.html', context)
forms.py
<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
{% crispy sample_form %}
<div id="form_set">
{{ formset.management_form }}
{% for form in formset.forms %}
<table class='no_error'>
{{ form.as_table }}
</table>
{% endfor %}
</div>
<input type="button" value="Add More" id="add_more">
<div id="empty_form" style="display:none">
<table class='no_error'>
{{ formset.empty_form.as_table }}
</table>
</div>
<script>
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>
<button type='submit' class='save btn btn-default' name = 'sampleform'>Save</button>
</form>
However, I have this problem that only the first formset instance is ever saved. no matter how many I put in dynamically. Could someone please help me?
The look of the form 
POST data when using Jquery to add one more instance (2 instances in total) 
POST data when not using Jquery, setting extra = 2. (2 instances in total) 
