【发布时间】:2018-09-22 07:36:02
【问题描述】:
我很难处理js 和jquery 执行事件,我想我对 jquery 的理解缺少一些东西。
因为我对这门语言真的很陌生,所以我很困惑,如果你能帮助我,我需要一些指导。
我需要什么:
我有一个表格作为一行,还有一个按钮,每次我点击它时都会添加一个新表格。新生成的表单也有不同的 ID 和名称。
现在每个表单都包含两个selects,并且需要一个change 函数来执行它。
我应该在哪里写这个change 函数,以便每一行都有自己的change 函数,而不会与其他行混淆。
编辑:
<div id="myDIV1" style="display: inline">
<form action="/banque" method="POST" enctype="multipart/form-data" id="personForm" data-tiers-url="{% url 'ajax_load_tiers' %}" >{% csrf_token %}{{ form.non_field_errors }}
<table style ="border-collapse: separate;border-spacing: 15px;" id="id_forms_table">
<tr><td width="5%">N P</td><td width="8%">Date d'operation</td><td width="25%">Désignation</td><td width="10%">Type tiers</td><td width="10%">Tiers</td><td width="10%">Référence de Facture</td><td width="10%">Montant debit </td><td width="10%">Montant crédit</td></tr>
{% for form in formset %}
<tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >
<td{% if forloop.first %} class="" {% endif %}><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>
<td>
{% render_field form.dateOperation class="form-control" %}{{form.dateOperation1.errors}}
</td>
<td>{% render_field form.designation class="form-control" %}{{form..errors}}
</td>
<td>
{% render_field form.typeTiers class="form-control" %}{{form.typeTiers.errors}}
</td>
<td>
{% render_field form.tiers class="form-control" %}{{form.tiers.errors}}
</td>
<td>{% render_field form.numfacture class="form-control" %}{{form.numfacture.errors}}
</td>
<td>{% render_field form.montantdeb class="form-control" %}{{form.montantdeb.errors}}</td>
<td>{% render_field form.montantcred class="form-control" %}</td>
</tr>
{% endfor %}
<tr>
</tr>
</table>
{{ formset.management_form }}
<tr>
<!-- BUTTONS <td colspan="4"><a href="javascript:void(0)" class="add-row">add property</a></td> -->
<td width="16%"><input type="submit" name="annuler" value="Annuler" class="btn btn-danger" style="float:right ;margin: 5px; margin-right: 35px"></td>
<td width="16%"><button value="" class="btn btn-success" style="float:right;margin: 5px;" onclick="verifier()">enregistrer</button></td>
</form>
<td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick="test()"></td></tr>
</div>
通过按钮 Ajouter une ligne 更改每个添加的行时,我需要执行以下更改功能:
$("#id_form-"+0+"-typeTiers").change(function () {
alert($('#id_form-'+0+'-typeTiers').attr('name'));
var url = $("#personForm").attr("data-tiers-url");
var typeID = $(this).val();
$.ajax({
url: url,
data: {
'tiers': typeID,
},
success: function(data) { // `data` is the return of the `load_cities` view function
alert(data);
var i=1;
var listeClt = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=frs]').remove().end().html();
var listefactVentes= $(data).clone(true).find('option[id=clt],option[id=fadepenses],option[id=frs]').remove().end().html();
var listefrs = $(data).clone(true).find('option[id=facvente],option[id=fadepenses],option[id=clt],option[id=cnss]').remove().end().html();
var listefactDep= $(data).clone(true).find('option[id=clt],option[id=facvente],option[id=frs]').remove().end().html();
// var cnss= $(data).clone(true).find('select').remove().end().html();
if(listeClt!=0){
$("#id_form-"+0+"-tiers").html(listeClt);
$("#id_form-"+0+"-numfacture").html(listefactVentes);
}
else if(listefrs!=0){
$("#id_form-"+0+"-tiers").html(listefrs);
$("#id_form-"+0+"-numfacture").html(listefactDep);
}
else {
$("#id_form-"+0+"-tiers").html(data);
}
}
});
});
"#id_form-"+0+"-typeTiers" 是第一行的 ID select ,"#id_form-"+0+"-tiers" 是在更改同一行的 "#id_form-"+0+"-typeTiers" 后将填充的选择的 ID。
此 jquery 正确更改了第一行,但是之后将添加的行呢?他们的字段将具有 IDs 1 , 2 .. 等而不是 0 。
任何帮助都会很棒。提前谢谢你
【问题讨论】:
-
显示您的代码,以便我们了解更多。我想到了一个问题,1)它是管理员表单吗? 2)它是正常的html吗? 3)是CreateView,UpdateView吗?问题出在哪里?
-
这不是管理表单,也不是普通的 html,我正在使用 django 表单集。我将添加我的代码
-
@AnupYadav 我已经添加了代码。
标签: javascript jquery django forms