Using one modal for multiple forms in django? - html

Question

I can't figure out how to use one modal for multiple forms.
Now, I can not find a way to have only one modal for severals form that I want to create. I don't really want to have 30 modals in the html for the 30 forms that I am going to submit.
Is there another way to fill it automatically?
My model is
class Project(models.Model):
project_name = models.CharField(max_length=30)
project_status = models.IntegerField(choices=PROJECT_STATUS,default=1)
project_sponsor = models.CharField('Project Sponsor',
max_length=255,default=1)
scope = models.TextField(max_length=10240, blank=True)
description = models.TextField(max_length=10240, blank=True)
Then, I wanted to have one form for each model attribute. For example, I would like to have a form for description, then another one for scope...
class ScopeForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(ScopeForm, self).__init__(*args, **kwargs)
for field in self.fields:
self.fields[field].required = False
class Meta:
model = Project
fields = ['project_scope',]
class DescriptionForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(DescriptionForm, self).__init__(*args, **kwargs)
for field in self.fields:
self.fields[field].required = False
class Meta:
model = Project
fields = ['description',]
In my html file, I am using a modal to submit the form
Purpose</br>
<div class="modal fade" id="purpose" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Purpose</h3>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
The Purpose will provide a brief overview of the purpose of the project and provide enough of a description to complete
the following sections. If information to complete the following sections is not available, state that it is unavailable and
state the person accountable and schedule for completion. </label>
</div>
<div class="form-group" "width: 300px" "height: 100px" "border: 1px solid blue">
<label for="purpose">Purpose</label>
<textarea id="txtCommentHere" class="form-control" rows="3" id="purpose" placeholder="Purpose">
</textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Draft
</label></br>
<label>
<input type="checkbox"> In Progress
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>

Answer 1

You could check out this in bootstrap documentation
Bootstrap (Many to 1) Modal
Basically you need to pass the data via js/jquery to modal.