javascript - 如何使用 csrf 令牌将表数据作为数组发布到 django

Question

---HTML--- 这一切都进入一个表单，签出按钮应该触发 POST 以获取表单中的所有值，包括表中的数据。

<div class="row">
  <div class="col-md-9">
    <div class="card">
      <div class="card-header">
        <h5 class="title">Bill Details</h5>
      </div>
      <div class="card-body">
        <form action="" method="POST">
        {% csrf_token %}
          <div class="row">
            <div class="col-md-5 pr-md-1">
              <div class="form-group">
                <label>Bill No (disabled)</label>
                <input type="text" name="billno" value="1" class="form-control" readonly>
              </div>
            </div>
            <div class="col-md-3 px-md-1">
              <div class="form-group">
                <label>Table No</label>
                <input type="text" name="tableno" class="form-control">
              </div>
            </div>
            <div class="col-md-4 pl-md-1">
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="billname" class="form-control">
              </div>
            </div>
            </div>
            <table id="bill" class="table table-sm">
            <thead>
                <tr class="d-flex">
                 <th class="text-center">
                    <th class="col-5">
                     Item Name
                    </th>
                    <th class="col-1">
                     Nos
                    </th>
                    <th class="col-2">
                     Price
                    </th>
                    <th class="col-2">
                     Amount
                    </th>
                 </th>
                 <th class="col-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="d-flex"> 
                    <td class="col-sm-5">
                    <div class="form-outline">
                    <select  id="selectitem1" name="itemname"  class="selectitem" "form-control" style="width: 100%" onchange="myFunction(this,1)">
                    <option selected disabled="True" class="form-control">Item Name </option>
                      {% for item in showdrop %}
                      <option value="{{item.item_name}}" name="{{item.item_name}}[]" data-price="{{item.item_price}}" class="form-control">{{item.item_name}}</option>
                      {% endfor %}
                    </select>  
                    </div>
                    </td>
                    <td class="col-sm-1">
                     <div class="form-group">
                        <input type="text" name="qty" class="form-control qty">
                     </div> 
                    </td>
                    <td class="col-sm-1-5">
                     <div class="form-group">
                        <input id="myText1" type="text" name="price" class="form-control price" value=" " readonly>
                     </div> 
                    </td>
                    <td class="col-sm-2">
                     <div class="form-group">
                        <input id="amt1" name="amt" class="form-control amt"  readonly>
                     </div> 
                    </td>
                    <td class="col-sm-2 ">
                     <div class="form-group">
              <div class="col-sm-15 align-self-center">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
                    <input type="radio" name="options" checked>
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Edit</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-single-02"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="1">
                    <input type="radio" name="options" class="d-none d-sm-none" >
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Add</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-gift-2"></i>
                    </span>
                  </label>
                  </div>
              </div>                        
                     </div> 
                    </td>
                </tr>

                    <tr class="d-flex">
                    <td class="col-sm-5">
                    <div class="form-outline">
                    <select  id="selectitem2" name="itemname" class="selectitem" "form-control" style="width: 100%" onchange="myFunction(this,2)">
                    <option selected disabled="True">Item Name </option>
                      {% for item in showdrop %}
                      <option value="{{item.item_name}}" data-price="{{item.item_price}}" class="form-control">{{item.item_name}}</option>
                      {% endfor %}
                    </select>
                    </div>  
                    </td>
                    <td class="col-sm-1">
                     <div class="form-group">
                        <input type="text" class="form-control qty" name="qty">
                     </div> 
                    </td>
                    <td class="col-sm-2">
                     <div class="form-group">
                        <input id="myText2" type="text" name="price" class="form-control price" value=" " readonly >
                     </div> 
                    </td>
                    <td class="col-sm-2">
                     <div class="form-group">
                        <input id="amt2" name="amt" class="form-control amt" readonly >
                     </div> 
                    </td>
                    <td class="col-sm-2 ">
                     <div class="form-group">
              <div class="col-sm-15 align-self-center">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
                    <input type="radio" name="options" checked>
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Edit</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-single-02"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="1">
                    <input type="radio" class="d-none d-sm-none" name="options">
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Add</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-gift-2"></i>
                    </span>
                  </label>
                  </div>
              </div>                        
                     </div> 
                    </td>
                </tr>
                
                    <tr class="d-flex justify-content-end">
                    <td class="col-5">
                     Bill Amount
                    </td>
                    <td class="col-sm-2">
                    <div class="form-outline">
                      <input id="total" name="total" class="form-control total" readonly>
                    </div>
                    </td>
                    <td class="col-sm-2 ">
                    </td>
                    </tr>
            </tbody>
          </table>
          <div class="card-footer">
          <div class="row">
            <button type="submit" class="btn btn-fill btn-primary" value="Add Data" >Check Out</button>
            </div>
           </div>
           </form>
           </div>
</div>
</div>
</div>

---- JS------- 金额计算函数

<script>
$(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 != '' && !isNaN(qty) && price != '' && !isNaN(price)){
                amt = qty*price;
                total = total+amt;
                var rowIndex = $(this).index()
            }
            $(this).find('.amt').html(function(){           
            document.getElementsByClassName("amt")[rowIndex].value=amt;
            });
        }); 
              $('.total').html(function(){
               document.getElementById('total').value = total;
        });
    });
});
</script>

根据所选项目显示项目价格的功能

<script>
function myFunction(e, index) {
    var opt = e.options[e.selectedIndex];
    document.getElementById("myText" + index).value = opt.dataset.price;
}
</script>

为 itemname 字段添加 select2 下拉列表的功能

<script>
$(document).ready(function() {
    $('.selectitem').select2();
});
</script>

将表数据保存到数组中并返回到 django 的函数

$(function()
{
    var myObjects = [];

    $('#bill tbody tr').each(function (index, value)
    {
        var row = GetRow(index);
        myObjects.push(row);
    });

    return myObjects;
});

django 视图

仅返回 billno 和 tableno 值。不返回表数据。

def bill(request):
    context = {}
    if request.method == "POST":
        billno=request.POST['billno']
        tableno=request.POST['tableno']
        ob=request.POST.getlist('tb[]')
        print(ob[1])
    return render(request, 'abc.html', context)

标签： javascripthtmljquerydjango