映射没有索引的动态复选框数组(Map dynamic array of checkboxes without index)

映射没有索引的动态复选框数组(Map dynamic array of checkboxes without index)

这个问题进一步建立在这里提出的问题： 如何映射输入字段的动态数组 。

我有一组动态的行，每个行都有自己的输入字段。 这些行可以动态添加到DOM中，因此我必须使用没有索引的输入数组（例如fieldname []而不是fieldname [1]等）。

当我在这些行中使用复选框时会出现问题。 由于未选中复选框时未提交复选框，因此我无法知道哪个提交的复选框属于哪个行值。

我的表格示例：

<form> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> </form>

我在这里找到了类似问题的答案： php数组的复选框 ，但答案显然只适用于带索引的数组。

这里最好的方法是什么？

编辑：

我还检查服务器端的错误表单，如果错误则将其重定向，所以我需要能够根据提交的值“重建”表单。

This question builds further on the question asked here: How to map dynamic array of input fields .

I have a dynamic set of rows with each it's own input fields. These rows can be dynamically added to the DOM, so I have to use input arrays without an index ( eg fieldname[] instead of fieldname[1] etc).

The problem occurs when I use checkboxes in these rows. Since checkboxes are not submitted when they are not checked, I see no way of knowing which submitted checkbox belongs to which row values.

Example of my form:

<form> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> <div class="row"> <input type="text" name="product[]"> <input type="text" name="qty[]"> <input type="checkbox" name="projectline[]"> </div> </form>

I found an answer to a similar problem here: php array of checkboxes , but the answer obviously only applies to arrays with an index.

What is the best approach here?

EDIT :

I also check the form for errors server-side and redirect it back if it is faulty, So I need to be able to 'reconstruct' the form based on the submitted values.

最满意答案

我看到用于此的一个技巧是在每个复选框之前放置一个隐藏字段，提交值为0的相同字段。这样，如果选中复选框，它将使用复选框值覆盖0值，但是如果你不这样做，你的数据中取而代之的是0而不是任何东西。

保持运行的索引总数的注释的答案也可以起作用，但是根据DOM的修改方式和时间而有点复杂。

I ended up assigning an index number to each of the rows, generating a new random id each time a row is added. I used jQuery for the clone functions and event binding.

Below is my complete solution.

This is my original form:

<form> <div class="row"> <input type="text" name="product[0]"> <input type="text" name="qty[0]"> <input type="checkbox" name="projectline[0]"> </div> </form>

I have a template row that I use to make clones of:

<div id="templaterow"> <input type="text" name="product[%%index%%]"> <input type="text" name="qty[%%index%%]"> <input type="checkbox" name="projectline[%%index%%]"> </div>

A button to clone the row:

<button id="addrow" value="add new row"/>

And a function bound to the button:

$('#addrow').on('click',function() { //template row is cloned and given the right attributes: var clone = $('#templaterow').clone(true, true); $('.row').last().after(clone); clone.addClass('row').removeAttr('id'); // the %%index%% placeholder is replaced by a random index number between 100 and 9999999 clone.html(function (index, html) { var rndIndex = Math.floor((Math.random() * 9999999) + 100); return html.replace(new RegExp('%%index%%','g'),rndIndex); }); });