1

假设我有以下表单集。

{% for form in formset %}
     <tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >

        <td{% if forloop.first %} class="" {% endif %}></td>

            {% render_field form.choicefield1 class="form-control" %}{{form.typeTiers.errors}}
        </td>
        <td>
            {% render_field form.choicefield2 class="form-control" %}{{form.tiers1.errors}}
        </td>
        <td>{% render_field form.choicefield3 class="form-control"   %}{{form.numfacture1.errors}}
        </td>

</tr>
{% endfor %}
  <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>

表单是使用添加的dynamic-formset.js，我在下面的代码中调用它以在单击我的按钮时创建一个新表单：

$(function () {
    $('#add-row').click(function() {

        addForm(this, 'form');
    });       
})

我需要在我添加到表单集中的每一行上应用 jquery 函数。这就是为什么我创建了函数test中调用的onclick函数：

var jax= -1;
function test(){
jax =jax+1;
alert($('#id_form-'+jax+'-typeTiers').attr('name'));
$("#id_form-"+jax+"-typeTiers").change(function () {

    alert($('#id_form-'+jax+'-typeTiers').attr('name'));
    x="<option>5</option>";
    y="<option>0</option>";
       $("#id_form-"+jax+"-tiers").html(x);
       $("#id_form-"+jax+"-numfacture").html(y);
      });

      }

我需要的是使我的行彼此独立，因此如果我更改第一行中的 field1，则只有同一行中的第二个字段会更改，而不会影响其他行。

但是我有两个问题：

第一个：当我首先加载页面时，我显示了第一行，但我无法在其上应用该test()功能，因为test()仅在单击“添加”按钮时才会执行。所以我不知道如何使它第一次工作。除此之外，test()如果添加了第二行，则仅适用于第一行。同样的事情：test()如果添加了第三行，则仅适用于第二行。

第二个：当我点击ajoutligne按钮超过 1 次时，应该赋予同一行字段中的其他两个字段的x和变量，它们显示在具有 jax 的最后一个值的行的字段上。y$("#id_form-"+jax+"-tiers").html(x);$("#id_form-"+jax+"-numfacture").html(y);

例如：如果我点击了ajoutligne 3 次，那么jax=3，如果我们在 中row 0，这就是改变时应该发生的情况choicefield1：

$("#id_form-"+0+"-tiers").html(x);$("#id_form-"+0+"-numfacture").html(y);

然而，这反而发生了：

$("#id_form-"+3+"-tiers").html(x);$("#id_form-"+3+"-numfacture").html(y);

我不知道如何解决它。我希望我解释清楚。

感谢您的帮助。

4

0 回答 0