title: How to create a running total input field in django form?
body: <p>How to create a running total using javascript in django form.</p>
  
  <p>This is my model:</p>
  
  <pre><code>class Contra(models.Model):
      date       = models.DateField(default=datetime.date.today)
      account    = models.ForeignKey(ledger1,on_delete=models.CASCADE,related_name='contraledgers')
  
  class Particularscontra(models.Model):
      contra     = models.ForeignKey(Contra,on_delete=models.CASCADE,related_name='contras')
      particular = models.ForeignKey(ledger1,on_delete=models.CASCADE,related_name='particularcontra')
      amount     = models.DecimalField(max_digits=10,decimal_places=2,null=True)
  </code></pre>
  
  <p>This is my form:</p>
  
  <pre><code>class ContraForm(forms.ModelForm):
  
      class Meta:
          model = Contra
          fields = ('date','account')
          widgets = {
              'date': DateInput(),
          }
  
      def __init__(self, *args, **kwargs):
          super(ContraForm, self).__init__(*args, **kwargs)
          self.fields['account'].widget.attrs = {'class': 'form-control select2',}
  
  
  
  class ParticularscontraForm(forms.ModelForm):
  
          class Meta:
              model = Particularscontra
              fields = ('particular','amount')
  
      def __init__(self, *args, **kwargs):
          super(ParticularscontraForm, self).__init__(*args, **kwargs)
          self.fields['particular'].widget.attrs = {'class': 'form-control select2',}
          self.fields['amount'].widget.attrs = {'class': 'form-control',}
  
  Contra_formSet = inlineformset_factory(Contra, Particularscontra,
                                              form=ParticularscontraForm, extra=6)
  </code></pre>
  
  <p>This 
  I tried this previously but was unsuccessful:</p>
  
  <pre><code>{% block content %}
  
  &lt;div class="content-wrapper"&gt;
  
  
  &lt;!-- &lt;div class="container"&gt; --&gt;
        &lt;section class="content-header"&gt;
          &lt;!-- &lt;div class="col-md-12 col-md-offset-4"&gt; --&gt;
            &lt;h1&gt;
              &lt;strong&gt;Company : {{company_details.Name}}&lt;/strong&gt;
            &lt;/h1&gt;
                  &lt;ol class="breadcrumb"&gt;
                         &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                         &lt;!-- &lt;li&gt;&lt;a href="#"&gt;Company list&lt;/a&gt;&lt;/li&gt; --&gt;
                       &lt;li class=""&gt;Company list&lt;/li&gt;
                       &lt;li class="active"&gt;Create Simple Unit&lt;/li&gt;
              &lt;/ol&gt;
          &lt;!-- &lt;/div&gt; --&gt;
  
  
        &lt;/section&gt;
  
    &lt;section class="content"&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
            &lt;!-- Horizontal Form --&gt;
            &lt;div class="box"&gt;
              &lt;div class="box-header with-border"&gt;
              {% if not form.instance.pk %}
                &lt;h3 class="box-title"&gt;&lt;strong&gt;Create Contra&lt;/strong&gt;&lt;/h3&gt;
              {% else %}
                &lt;h3 class="box-title"&gt;&lt;strong&gt;Update Contra&lt;/strong&gt;&lt;/h3&gt;
              {% endif %}
              &lt;/div&gt;
              &lt;!-- /.box-header --&gt;
              &lt;!-- form start --&gt;
              &lt;form method="POST" class="form-horizontal"&gt;
  
              {% csrf_token %}
  
  
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="box box-success"&gt;
  
                &lt;div class="box-body form-responsive no-padding"&gt;
  
                  &lt;br&gt;
                   &lt;br&gt;
                  &lt;div class="col-md-2"&gt;  
  
                      &lt;div class="form-group"&gt;
                         &lt;label for="PAN1" class="col-md-4 control-label"&gt;Account&lt;i class="material-icons" style="font-size:16px;color:red"&gt;*&lt;/i&gt;&lt;/label&gt;
                         &lt;div class="col-md-8"&gt;
                          {{ form.account }}
                        &lt;/div&gt;
                      &lt;/div&gt; 
  
                  &lt;/div&gt; 
  
  
                   &lt;div class="col-md-10"&gt;
  
                      &lt;div class="form-group"&gt;
                         &lt;label for="State1" class="col-md-4 control-label"&gt;Date&lt;i class="material-icons" style="font-size:16px;color:red"&gt;*&lt;/i&gt;&lt;/label&gt;
                         &lt;div class="col-md-8"&gt;
                          {{form.date}}
                        &lt;/div&gt;
                      &lt;/div&gt; 
  
  
  
                   &lt;/div&gt;
  
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="box box-success"&gt;
  
                &lt;div class="box-body table-responsive no-padding"&gt;
                  &lt;table class="table"&gt;
                      {{ contras.management_form }}
  
                          &lt;thead&gt;
                          &lt;tr&gt;
                            &lt;th class="col-md-6"&gt;Particulars&lt;i class="material-icons" style="font-size:16px;color:red"&gt;*&lt;/i&gt;&lt;/th&gt;
                            &lt;th class="col-md-6"&gt;Amount&lt;i class="material-icons" style="font-size:16px;color:red"&gt;*&lt;/i&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;/thead&gt;
  
                          &lt;tbody id="calculate"&gt;
                              {% for form in contras.forms %}
  
                                  &lt;tr class='{% cycle "row1" "row2" %}  formset_row'&gt;
                                    &lt;td class="col-md-6"&gt;{{ form.id }} {{ form.particular}}&lt;/td&gt;
                                    &lt;td class="col-md-6 amounts"&gt;{{ form.amount}}&lt;/td&gt;
                                  &lt;/tr&gt;  
  
                              {% endfor %}
  
  
  
  
                          &lt;/tbody&gt;
  
  
                          &lt;tr&gt;
                              &lt;td class="col-md-6"&gt;&lt;/td&gt;
                              &lt;td class="col-md-6" id="totaled"&gt;&lt;input type="text" name="total"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                  &lt;/table&gt;
  
                &lt;/div&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
                &lt;!-- /.box-body --&gt;
                &lt;div class="box-footer"&gt;
                 &lt;button class="btn btn-default" type="reset" value="Reset"&gt;Reset&lt;/button&gt;
                  {% if not form.instance.pk %}
                  &lt;button type="submit" class="btn btn-info pull-right" value="Submit"&gt;Create&lt;/button&gt;
                  {% else %}
                  &lt;button type="submit" class="btn btn-info pull-right" value="Submit"&gt;Update&lt;/button&gt;
                  {% endif %}
  
  
               &lt;/div&gt;
                &lt;!-- /.box-footer --&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="{% static 'formset/jquery.formset.js' %}"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $('.formset_row').formset({
              addText: 'add contra',
              deleteText: 'remove',
              prefix: 'contras'
          });
      &lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
        let tableInstance = $('#calculate td.amounts');
        let totals = 0;
        tableInstance.each(function() {
          totals = totals + Math.floor($(this).text() * 100) / 100;
        });
        $(".totaled :input").val(totals);
      });
  
      &lt;/script&gt;
  
      &lt;/section&gt;
      &lt;/div&gt;
  
  
  
  
      {% endblock %}
  </code></pre>
  
  <p>This is the javascript code I tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function(e){  
    $('#calculate tbody').change(function(){
         var totals = 0;
         $(".amounts").each(function(){
              totals = totals + parseInt($(this).val());
  
          })
          $(".totaled").val(totals);
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am using inline formset in my template I want to display the running total of all the amount given in my inline form..</p>
  
  <p>How is that possible to do it in django?</p>
  
  <p>any guess?</p>
  
  <p>Thank you</p>