dongyi2006 2015-02-05 13:31
浏览 99
已采纳

映射没有索引的动态复选框数组

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.

  • 写回答

2条回答 默认 最新

  • doudu22272099831 2015-02-05 17:58
    关注

    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);
        });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!