title: How to POST table data as array to django using csrf token
body: <p>---HTML---
  This all goes into a form and check out button should trigger POST to fetch all values in the form including the datas in table.</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-9&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-header&quot;&gt;
          &lt;h5 class=&quot;title&quot;&gt;Bill Details&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;form action=&quot;&quot; method=&quot;POST&quot;&gt;
          {% csrf_token %}
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-5 pr-md-1&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;Bill No (disabled)&lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;billno&quot; value=&quot;1&quot; class=&quot;form-control&quot; readonly&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-3 px-md-1&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;Table No&lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;tableno&quot; class=&quot;form-control&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-4 pl-md-1&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;exampleInputEmail1&quot;&gt;Email address&lt;/label&gt;
                  &lt;input type=&quot;email&quot; name=&quot;billname&quot; class=&quot;form-control&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;table id=&quot;bill&quot; class=&quot;table table-sm&quot;&gt;
              &lt;thead&gt;
                  &lt;tr class=&quot;d-flex&quot;&gt;
                   &lt;th class=&quot;text-center&quot;&gt;
                      &lt;th class=&quot;col-5&quot;&gt;
                       Item Name
                      &lt;/th&gt;
                      &lt;th class=&quot;col-1&quot;&gt;
                       Nos
                      &lt;/th&gt;
                      &lt;th class=&quot;col-2&quot;&gt;
                       Price
                      &lt;/th&gt;
                      &lt;th class=&quot;col-2&quot;&gt;
                       Amount
                      &lt;/th&gt;
                   &lt;/th&gt;
                   &lt;th class=&quot;col-2&quot;&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr class=&quot;d-flex&quot;&gt; 
                      &lt;td class=&quot;col-sm-5&quot;&gt;
                      &lt;div class=&quot;form-outline&quot;&gt;
                      &lt;select  id=&quot;selectitem1&quot; name=&quot;itemname&quot;  class=&quot;selectitem&quot; &quot;form-control&quot; style=&quot;width: 100%&quot; onchange=&quot;myFunction(this,1)&quot;&gt;
                      &lt;option selected disabled=&quot;True&quot; class=&quot;form-control&quot;&gt;Item Name &lt;/option&gt;
                        {% for item in showdrop %}
                        &lt;option value=&quot;{{item.item_name}}&quot; name=&quot;{{item.item_name}}[]&quot; data-price=&quot;{{item.item_price}}&quot; class=&quot;form-control&quot;&gt;{{item.item_name}}&lt;/option&gt;
                        {% endfor %}
                      &lt;/select&gt;  
                      &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-1&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;text&quot; name=&quot;qty&quot; class=&quot;form-control qty&quot;&gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-1-5&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input id=&quot;myText1&quot; type=&quot;text&quot; name=&quot;price&quot; class=&quot;form-control price&quot; value=&quot; &quot; readonly&gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input id=&quot;amt1&quot; name=&quot;amt&quot; class=&quot;form-control amt&quot;  readonly&gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2 &quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class=&quot;col-sm-15 align-self-center&quot;&gt;
                  &lt;div class=&quot;btn-group btn-group-toggle float-right&quot; data-toggle=&quot;buttons&quot;&gt;
                    &lt;label class=&quot;btn btn-sm btn-primary btn-simple active&quot; id=&quot;0&quot;&gt;
                      &lt;input type=&quot;radio&quot; name=&quot;options&quot; checked&gt;
                      &lt;span class=&quot;d-none d-sm-block d-md-block d-lg-block d-xl-block&quot;&gt;Edit&lt;/span&gt;
                      &lt;span class=&quot;d-block d-sm-none&quot;&gt;
                        &lt;i class=&quot;tim-icons icon-single-02&quot;&gt;&lt;/i&gt;
                      &lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label class=&quot;btn btn-sm btn-primary btn-simple&quot; id=&quot;1&quot;&gt;
                      &lt;input type=&quot;radio&quot; name=&quot;options&quot; class=&quot;d-none d-sm-none&quot; &gt;
                      &lt;span class=&quot;d-none d-sm-block d-md-block d-lg-block d-xl-block&quot;&gt;Add&lt;/span&gt;
                      &lt;span class=&quot;d-block d-sm-none&quot;&gt;
                        &lt;i class=&quot;tim-icons icon-gift-2&quot;&gt;&lt;/i&gt;
                      &lt;/span&gt;
                    &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                        
                       &lt;/div&gt; 
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                      &lt;tr class=&quot;d-flex&quot;&gt;
                      &lt;td class=&quot;col-sm-5&quot;&gt;
                      &lt;div class=&quot;form-outline&quot;&gt;
                      &lt;select  id=&quot;selectitem2&quot; name=&quot;itemname&quot; class=&quot;selectitem&quot; &quot;form-control&quot; style=&quot;width: 100%&quot; onchange=&quot;myFunction(this,2)&quot;&gt;
                      &lt;option selected disabled=&quot;True&quot;&gt;Item Name &lt;/option&gt;
                        {% for item in showdrop %}
                        &lt;option value=&quot;{{item.item_name}}&quot; data-price=&quot;{{item.item_price}}&quot; class=&quot;form-control&quot;&gt;{{item.item_name}}&lt;/option&gt;
                        {% endfor %}
                      &lt;/select&gt;
                      &lt;/div&gt;  
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-1&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control qty&quot; name=&quot;qty&quot;&gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input id=&quot;myText2&quot; type=&quot;text&quot; name=&quot;price&quot; class=&quot;form-control price&quot; value=&quot; &quot; readonly &gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2&quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input id=&quot;amt2&quot; name=&quot;amt&quot; class=&quot;form-control amt&quot; readonly &gt;
                       &lt;/div&gt; 
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2 &quot;&gt;
                       &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class=&quot;col-sm-15 align-self-center&quot;&gt;
                  &lt;div class=&quot;btn-group btn-group-toggle float-right&quot; data-toggle=&quot;buttons&quot;&gt;
                    &lt;label class=&quot;btn btn-sm btn-primary btn-simple active&quot; id=&quot;0&quot;&gt;
                      &lt;input type=&quot;radio&quot; name=&quot;options&quot; checked&gt;
                      &lt;span class=&quot;d-none d-sm-block d-md-block d-lg-block d-xl-block&quot;&gt;Edit&lt;/span&gt;
                      &lt;span class=&quot;d-block d-sm-none&quot;&gt;
                        &lt;i class=&quot;tim-icons icon-single-02&quot;&gt;&lt;/i&gt;
                      &lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label class=&quot;btn btn-sm btn-primary btn-simple&quot; id=&quot;1&quot;&gt;
                      &lt;input type=&quot;radio&quot; class=&quot;d-none d-sm-none&quot; name=&quot;options&quot;&gt;
                      &lt;span class=&quot;d-none d-sm-block d-md-block d-lg-block d-xl-block&quot;&gt;Add&lt;/span&gt;
                      &lt;span class=&quot;d-block d-sm-none&quot;&gt;
                        &lt;i class=&quot;tim-icons icon-gift-2&quot;&gt;&lt;/i&gt;
                      &lt;/span&gt;
                    &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                        
                       &lt;/div&gt; 
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  
                      &lt;tr class=&quot;d-flex justify-content-end&quot;&gt;
                      &lt;td class=&quot;col-5&quot;&gt;
                       Bill Amount
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2&quot;&gt;
                      &lt;div class=&quot;form-outline&quot;&gt;
                        &lt;input id=&quot;total&quot; name=&quot;total&quot; class=&quot;form-control total&quot; readonly&gt;
                      &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td class=&quot;col-sm-2 &quot;&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;div class=&quot;card-footer&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-fill btn-primary&quot; value=&quot;Add Data&quot; &gt;Check Out&lt;/button&gt;
              &lt;/div&gt;
             &lt;/div&gt;
             &lt;/form&gt;
             &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>---- JS-------
  <strong>Function for amount calculation</strong></p>
  <pre><code>&lt;script&gt;
  $(function(){
      $('tbody').on('keyup', '.qty,.price', function(){
          var total = 0;
          $(this).parents('table:first').find('tr').each(function(){
               var qty = $(this).find('.qty').val();
               var price = $(this).find('.price').val();
          
              var amt = 0;
              if(qty != '' &amp;&amp; !isNaN(qty) &amp;&amp; price != '' &amp;&amp; !isNaN(price)){
                  amt = qty*price;
                  total = total+amt;
                  var rowIndex = $(this).index()
              }
              $(this).find('.amt').html(function(){           
              document.getElementsByClassName(&quot;amt&quot;)[rowIndex].value=amt;
              });
          }); 
                $('.total').html(function(){
                 document.getElementById('total').value = total;
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  <p>function for displaying price of item based on item selected</p>
  <pre><code>&lt;script&gt;
  function myFunction(e, index) {
      var opt = e.options[e.selectedIndex];
      document.getElementById(&quot;myText&quot; + index).value = opt.dataset.price;
  }
  &lt;/script&gt;
  </code></pre>
  <p>Function to add select2 dropdown list for itemname fields</p>
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('.selectitem').select2();
  });
  &lt;/script&gt;
  </code></pre>
  <p>Function to save table datas into array and return back to django</p>
  <pre><code>$(function()
  {
      var myObjects = [];
  
      $('#bill tbody tr').each(function (index, value)
      {
          var row = GetRow(index);
          myObjects.push(row);
      });
  
      return myObjects;
  });
  </code></pre>
  <p>django views</p>
  <p>Only billno and tableno values are returned. Table data is not returned.</p>
  <pre><code>def bill(request):
      context = {}
      if request.method == &quot;POST&quot;:
          billno=request.POST['billno']
          tableno=request.POST['tableno']
          ob=request.POST.getlist('tb[]')
          print(ob[1])
      return render(request, 'abc.html', context)
  </code></pre>