I am trying to create a splitwise <https://www.splitwise.com/> 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.
[image: Screenshot 2020-03-19 at 1.31.33 PM.png]
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
--
You received this message because you are subscribed to the Google Groups
"Django developers (Contributions to Django itself)" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-developers+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-developers/CAN%2BO0S7vzzRRH%2Bh-gLGnp6av5y%3Dj0fXQCfK_a0zqSYP_tfs_iQ%40mail.gmail.com.
