Django& Js:在简单的HTML输入

时间:2018-03-21 11:31:04

标签: javascript django forms data-cleaning

我已经在forms.py中创建了一个表单,在提交表单后,使用form.cleaned_data将值平滑地插入到我的数据库中。   enter image description here 我的模板有一个按钮(称为" ajouter une ligne"),它添加了一个新行(该行包含一个类似于原始行的表单)。这个动作(添加行)由Js编码。

enter image description here 我的问题是,当我想提交包含原始行和第二行的最终表单时。它只提交第一个,因为第一个ligne是在forms.py上创建的,所以在它上面提交了clean_data。但是,第二行是使用js直接在模板上创建的,因此form.cleaned_data不会对其进行处理。

这是我的模板原始行:

<form action="/veentes"  method="POST" enctype="multipart/form-data">{% 
 csrf_token %}{{ form.non_field_errors }}
 <table style ="border-collapse: separate;border-spacing: 15px;" id="div1">
<tr><td width="5%">N P</td><td width="25%">Désignation</td><td width="8%">Date de Facture</td><td width="10%">Montant HT</td><td width="10%">TVA</td><td width="10%">Montant TTC</td></tr>

     <tr style="border:1px solid black;" >

        <td><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>

        <td>
            {% render_field form.designation1 class="form-control" id="inlineFormInputName" placeholder="désignation" name="designation1" %}{{form.degn.errors}}

        </td>
        <td>{% render_field form.datefacture1  class="form-control" id="inlineFormInputName" placeholder="Date de Facture" name="datefacture1" %}{{form.dateFac.errors}}

        </td>
        <td>
            {% render_field form.mht1 class="form-control" id="inlineFormInputName" placeholder="Montant HT" name="mht1" %}{{form.mht.errors}}
        </td>
        <td>
            {% render_field form.mtva1 class="form-control" id="inlineFormInputName" placeholder="TVA" name="mtva1" %}{{form.mtva.errors}}
        </td>
        <td>{% render_field form.mttc1 class="form-control" 
         id="inlineFormInputName" placeholder="Montant TTC" name="mttc1" %}
         {{form.mttc.errors}}
        </td>
        </form>



</tr>

这是我创建新行的Js代码:

var click=1;
function addform() {
click +=1;
var element = document.getElementById("div1");
//create a tr
var id_tr="tr"+click;
create_tr(element, id_tr);
document.getElementById('num').value=click;

//create inputs 
var designation = document.createElement("INPUT");
textinput(designation, "text" , "designation", "form-control", 
"Désignation",click);

var datef = document.createElement("INPUT");
textinput(datef, "date" , "datefacture", "form-control", "Date de 
Facture",click);

var mht = document.createElement("INPUT");
textinput(mht, "text" , "mht", "form-control", "Montant HT",click);

var mtva = document.createElement("INPUT");
textinput(mtva, "text" , "mtva", "form-control", "Montant TVA",click);

var mttc = document.createElement("INPUT");
textinput(mttc, "text" , "mttc", "form-control", "Montant TTC",click);



var elmtr=document.getElementById(id_tr);
var y = document.createElement("TD");
var td="td";
 td=td + id_tr;
y.setAttribute("id", td+0);
elmtr.appendChild(y);
var elmtd=document.getElementById(td+0);
var x = document.createElement("B");
x.setAttribute("name","np"+click);
x.setAttribute("class","col-xs-1");
var t = document.createTextNode(click);
x.appendChild(t);
elmtd.appendChild(x);
create_tds(elmtr, designation, 1 ,id_tr);
create_tds(elmtr, datef, 2 ,id_tr);
create_tds(elmtr, mht, 4 ,id_tr);
create_tds(elmtr, mtva, 5,id_tr);
create_tds(elmtr, mttc, 6 , id_tr);


 }
function create_tr(element, id_tr){
 var trr = document.createElement("TR");
 trr.setAttribute("id", id_tr);
 element.appendChild(trr);

 }
 function create_tds(elmtr,input_td, clicktd,id_tr){
  var y = document.createElement("TD");
  var td="td";
  td=td + id_tr;
  y.setAttribute("id", td+clicktd);
  elmtr.appendChild(y);
  var elmtd=document.getElementById(td+clicktd);
  elmtd.appendChild(input_td);

  }
function textinput(x, type, name, classe, placeholder,click){

x.setAttribute("type", type);
x.setAttribute("name", name+click);
x.setAttribute("class", classe);
x.setAttribute("placeholder", placeholder);
if (name=="file") {

    x.setAttribute("disabled", "disabled");
}
if (type == "button") {
x.setAttribute("value", "importer");    
}
 }

我的观点代码是:

def post(self,request,*args,**kwargs):
    if request.method == "POST":
        p=int(request.POST['numpiece'])
        print(p)
        np=p
        form=FormVents(request.POST,request.FILES)
        #np=1
        print("numpiece")
        np=2
        x=client.objects.all().filter(nom=request.POST['client_name']).values_list('id', flat=True)
        if form.is_valid():
            for j in range(1,np+1):
                print(j)
                 vent=ventes(numpiece=j,id_facture_id=v.id,designation=form.cleaned_data.get('designation'+str(j)),montantHT=form.cleaned_data.get('mht'+str(j)),montantTVA=form.cleaned_data.get('mtva'+str(j)),montantTTC=form.cleaned_data.get('mttc'+str(j)))
                vent.save()
    else:
        form = forms.FormVents(request.POST or None)

form.py:

class FormVents(forms.Form):
    designation1=forms.CharField()
    datefacture1=forms.DateField(initial=datetime.date.today)
    mht1=forms.FloatField()
    mtva1=forms.FloatField()
    mttc1=forms.FloatField()

请有任何想法,我如何在我的第二行使用cleaned_data? PS:当我用form.cleaned_data替换request.POST时,它会添加两行,但我想使用cleaning_data添加所有行,因为我读到了数据安全性,我需要使用form.cleaned_data。 所以请帮我解决这个问题。非常感谢你

1 个答案:

答案 0 :(得分:0)

看看Django中的Formsets。它们允许批量提交多个对象。您可以根据现有表单创建它:

class FormVents(forms.Form):
    designation1=forms.CharField()
    datefacture1=forms.DateField(initial=datetime.date.today)
    mht1=forms.FloatField()
    mtva1=forms.FloatField()
    mttc1=forms.FloatField()

VentsFormSet = formset_factory(FormVents)

然后,在您看来,您几乎可以像普通表格一样使用它。唯一的区别是您需要迭代您的formset来为每个对象提取数据:

formset = VentsFormSet(request.POST, request.FILES)

if formset.is_valid():
    for form in formset:
        data_to_be_saved = form.cleaned_data