-1

Hi I have this jQuery Function to duplicate form fields. Now I need to process them with PHP and my problem is that the cloned elements have the same input name.

I would like to add and variabel on the end of the name like _1 _2 _3 and so on. Also it would be great to put in a hidden field the amount of cloned elements to process them in a loop.

I'm really not good in jQuery and need it pretty quick otherwise I would start reading documentary about it and do it myself.

Maybe u guys can help me out. Would appriciate it a lot :)

There is the jQuery Part:

$(document).ready(function() {
$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
    $('#input' + num).after(newElem);

    $('#btnDel').removeAttr('disabled');

    if (newNum == 10)// Max
        $('#btnAdd').attr('disabled','disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedInput').length;

    $('#input' + num).remove();
    $('#btnAdd').removeAttr('disabled','');

    if (num-1 == 1)
        $('#btnDel').attr('disabled','disabled');
});

$('#btnDel').attr('disabled','disabled');

});

And here the HTML 

<div id="input1" class="clonedInput">
<!-- Elements to clone -->
    <div class="control-group">
        <label class="control-label" for="">Firmenname</label>
        <div class="controls">
            <input type="text" class="input-xlarge {validate:{required:true}}" rel="popover" data-content="Der Firmenname ist ein wichtiger Hinweis." data-original-title="Hilfe" id="firma" name="firma">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="">Branche</label>
        <div class="controls">
            <input type="text" class="input-xlarge" name="branche">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="">Anschrift</label>
        <div class="controls">
            <input type="text" class="input-xlarge" name="anschrift">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="">Ansprechpartner</label>
        <div class="controls">
            <input type="text" class="input-xlarge" name="ansprechpartner">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="">Tel.</label>
        <div class="controls">
            <input type="text" class="input-xlarge">
        </div>
    </div>
<!-- END Elements to clone -->    
</div>
4

2 回答 2

1

您的输入名称应该全部是name[]而不是name_1,name_2等。PHP 识别这种名称格式，并创建$_POST['name']一个数组，其中每个具有该名称的输入都有一个元素。

您仍然需要为元素提供唯一 ID。但也许您克隆的输入根本不需要 ID，因此您可以完全避免这个问题。

您可能还想查看 jquery-dynamic-form 插件。但是，我刚刚检查并没有解决这个问题（实际上，每行中嵌入+和-按钮的演示具有重复的ID，因此它不是有效的DOM）。

顺便说一句，您不需要使用new Number. 写吧：

var newNum = num+1;
于 2012-10-04T00:00:29.037 回答
0

要创建唯一的 id，只需保留一个从 0 开始并在每次创建新克隆时递增 1 的计数器。然后将此计数器连接到您的姓名字段。

于 2012-10-04T00:05:50.883 回答