Django: multiple forms how to save this not hidden - django

Question

I am struggling with validating a form based on damage_type choice field.
I show only one DamageTypeForm in the template (other two are hide by js .hide() function).
Each DamageTypeForm has got some required=True fields, therefore I cannot save the selected form this way:
def createDamage(request):
damage_specify_form = DamageSpecify(request.POST or None)
damage_type_form1 = DamageTypeForm1(request.POST or None)
damage_type_form2 = DamageTypeForm2(request.POST or None)
damage_type_form3 = DamageTypeForm3(request.POST or None)
if request.method == 'POST':
damage_type = request.POST.get('damage_type ')
if damage_type == 'DamageType1':
if damage_type_form1.is_valid():
damage_type_form1.save()
return reverse('damage:type1')
elif damage_type == 'DamageType2':
if damage_type_form2.is_valid():
damage_type_form2.save()
return reverse('damage:type2')
elif damage_type == 'DamageType3':
if damage_type_form3.is_valid():
damage_type_form3.save()
return reverse('damage:type3')
else:
damage_type_form1 = DamageTypeForm1()
damage_type_form2 = DamageTypeForm2()
damage_type_form3 = DamageTypeForm3()
context = {
'damage_specify_form': damage_specify_form,
'damage_type_form1': damage_type_form1,
'damage_type_form2': damage_type_form2,
'damage_type_form3': damage_type_form3,
}
return render(request, 'create_damage.html', context)
How can I get damage_type in View before submitting the form in the template, to save only desired form??

Answer 1

Here are two approaches you could take based on the answer to your previous question. Where it was suggested that you have:
<form>
{% csrf_token %}
{{damage_type_form.as_p}}
<div id="type1">
{{damage_form_1.as_p}}
</div>
<div id="type2">
{{damage_form_2.as_p}}
</div>
<div id="type3">
{{damage_form_3.as_p}}
</div>
<input type="submit" ...>
</form>
I'm not so sure why it was suggested to you that way. But the issue you highlighted is that the other forms (the hidden ones) do have required fields even though their respective forms are hidden.
So one way is to use the novalidate attribute on the form tag:
<form novalidate>
...
</form>
This novalidate is a form-level attribute used to turn off validation for a form, despite the attributes of the inputs it contains (i.e. will override inputs with the required attribute, or that would otherwise fail validation).
NOTE: Do not use novalidate if you simply want to internationalize or otherwise change the content of the default error messages. This can be done with JavaScript.
I personally don't think using the novalidate attribute is a good practice even though it might come in handy for some scenarios.
On the other hand, (my recommendation), you could use JavaScript or Jquery to set/remove the fields required attribute if the respective form is visible or not. For example:
# But let's say you do have separate forms...
<form id="form-1">
...
</form>
<form id="form-2" style="display:none">
...
</form>
# javascript
<script type="text/javascript">
# using jquery here...
$(document).ready(function(){
# Checking for a form's visibility
if($("#form-2").css('display') === 'none'){
# form-2: display is none. Therefore set its field attributes required to false
$('#form-2 input[type="text"]').removeAttr('required');
# or
# $('#form-2 #field_id').removeAttr('required');
}
else{
# form-2: display is not none. Therefore set its field attributes required to true
$('#form-2 input[type="text"]').attr('required','true');
# or
# $('#form-2 #field_id').attr('required','true');
}
});
</script>
Please note that the above JavaScript can be a bit cleaner, even adding some/an event listener to pick up when a form's visibility has changed: to set/remove the required attributes on a specific form.
That's just a basic concept of an approach I'd use.