stock.html

{% extends 'base.html' %}
{% load add_css is_checkbox field_type %}

{% block title %} Stock {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
<div class="right_col" role="main">
	<h1 class="text-center">Stock</h1>
	<div class="space"></div>
	<form class="stock-form">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" name="Save" />
  </form>
    <button class="btn btn-primary add-stock">Add</button>
</div>
<div class="stock-list">
  {% include 'dashboard/stocks/stock_to_save_list.html' %}
</div>
{% endblock content %}

  {% block javascripts %}
    {{ block.super }}
    <script>
      var objList = [];
      $(document).ready(function() {
        $('.add-stock').on("click", function(){
          var obj = {};
          obj['date'] =  $('#id_miti').val();
          obj['item_group'] = $('#id_item_group').val();
          obj['item'] = $('#id_item').val();
          obj['department'] = $('#id_department').val();
          obj['employee'] = $('#id_employee').val();
          obj['quantity'] = $('#id_quantity').val();
          obj['value'] = $('#id_value').val();
          obj['specification'] = $('#id_specification').val();
          obj['remarks'] = $('#id_remarks').val();
          objList.push(obj);
          // add object to table
          $('.stock-list').find("#table-body").append("<tr>");
          $('.stock-list').find("#table-body").append("<td>" + obj['item'] + "</td>");
          $('.stock-list').find("#table-body").append("<td>" + obj['quantity'] + "</td>");
          $('.stock-list').find("#table-body").append("<td>" + obj['value'] + "</td>");
          $('.stock-list').find("#table-body").append("<td>" + obj['department'] + "</td>");
          $('.stock-list').find("#table-body").append("<td>" + obj['employee'] + "</td>");
          $('.stock-list').find("#table-body").append("<td>" + obj['specification'] + "</td>");
          $('.stock-list').find("#table-body").append("</tr>");
          console.log("Added object to table:")
          console.log(obj);
        })

        $('.stock-form').submit(function(e) {
    			e.preventDefault();

    			if(objList.length > 0){
    				var token = "{{csrf_token}}";
            var data = objList.reduce((formData, obj) => {
                Object.keys(objList).forEach(key => formData.append(key, objList[key]));
                return formData;
            }, new FormData());
    			  $.ajax({
    						type: 'post',
    						url: '/dashboard/stock-to-save',
                processData: false,
    						data: data,
    						success: function(data) {
    							console.log("Success!")
    							console.log('data', data);
    						}
    					});
    			}
    		});
      })
    </script>
  {% endblock javascripts %}

views.py

# esori garnu vanda if form.is_valid form.save() yo way ma garna lai kojeko miliraxaina

def ajax_stock_list_to_save(request):
    print ('request', request.POST)
    form = StockForm(request.POST or None)
    if request.method == "POST":
        data = request.POST
        date = parser.parse(data['date'])
        data['item']
        data['item_group']
        data['department']
        data['employee']
        data['quantity']
        data['value']
        data['specification']
        data['remarks']

        s = OpeningStock(miti=date, item = data['item'], item_group=data['item_group'],
                department=data['department'], employee=data['employee'], quantity=data['quantity'],
                value=data['value'], specification=data['specification'], remarks=data['remarks'])
        s.save()
        return HttpResponse(json.dumps({'result': 'success', 'data': request.POST}))
    else:
        context = {}
        context['form'] = form
        return render(request, 'dashboard/stocks/stock.html', context)