Help to Create Dynamic Form

[Rahul Roshan]

I am trying to create a splitwise clone application for my weekend project. I have arrived at a stage where I have to create a new Bill. Please find below screenshot.

In this form I have three queries:

1. A dynamic form where a model with fields (amount, user) can be added or removed dynamically. I am using modelformset_factory to perform this operation. From the UI's perspective I am using javascript to add two fields based onClick operation and similarly remove onClick, please check code. My question is, is this correct approach from UI's perspective to create dynamic fields using javascript or is there any other right way ?
2. I am passing users list from views.py to my bill.html template. Again, is this a correct approach ? Or is there any other right way ?
3. After creating multiple split forms and clicking on create Bill. At the view.py I am receiving only one split form rather than multiple ?? I am thinking something is wrong because of might be above two approaches are not correct !!! Need help over this.

This is the javascript I am using to create split model having two fields (amount and user). Providing the existing users list from the users args I passed from the views.py

bill.html

    <script>
    var room = 1;
function education_fields() {
    room++;
    var objTo = document.getElementById('education_fields')
    var divtest = document.createElement("div");
   divtest.setAttribute("class", "form-group removeclass"+room);
   var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="col-sm-5 nopadding"><div class="form-group"> <input type="text" 
    class="form-control" id="amount" placeholder="Amount"></div></div><div class="col-sm-5 nopadding">
    <div class="form-group"> <select type="select" class="form-control">
    {% for user in users %}<option>{{user}}</option>{% endfor %}</select></div></div>
    <div class="col-sm-2 nopadding"><div class="form-group"><div class="input-group"> 
    <div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> 
    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
    objTo.appendChild(divtest)
}
   function remove_education_fields(rid) {
      $('.removeclass'+rid).remove();
   }
    </script>

models.py

class Bill(models.Model):
    bill_id = models.AutoField(primary_key=True, null=False)
    bill_name = models.CharField(max_length=100)
    total_amount = models.IntegerField()

    def __str__(self):
        return "%s-%s"%(str(self.bill_id), self.bill_name)

class Split(models.Model):
    amount = models.IntegerField()
    split_user = models.ForeignKey(User, on_delete=models.CASCADE, null=True)
    bill = models.ForeignKey(Bill, on_delete=models.CASCADE, null=False, default='0000')

    def __str__(self):
        return "%s-%s" % (str(self.bill_id), self.amount)

forms.py

class BillModelForm(forms.ModelForm):
    class Meta:
        model = Bill
        fields = ('bill_name', 'total_amount')
        labels = {
            'bill_name': 'Enter the Expenditure',
            'total_amount': 'Enter the total amount',
        }

SplitFormSet = modelformset_factory(
    Split,
    fields=('amount','split_user'),
    extra=1,
    labels = {
            'amount': 'Enter the split amount',
            'split': "Share Friend",
    },
    widgets={
        'amount': forms.TextInput(
            attrs={
                'class': 'form-control',
                'placeholder': 'Amount',
                'id':'amount',
            }
        ),
        'split_user': forms.Select(
            attrs={
                'class': 'form-control',
                'placeholder': '',
            },
        )
    }
)

Thanks,

Rahul  

[ihsan demir]

ı try jqery dynamic form wroking so good but when ım add new form ım cant saved and ı cant fixed problem ?? did fixed your problm ??

19 Mart 2020 Perşembe tarihinde saat 11:18:04 UTC+3 itibarıyla rahulr...@gmail.com şunları yazdı: