Question

我正在尝试让用户点击“点击此处添加更多信息”链接。我正在尝试使用输入字段执行此操作，以便字段的id必须递增。

我希望jQuery在每次点击时添加这个，其中$ i是每个字段的数量递增：

<div id="info"></div>
<?php echo $form->input("User.$i.first_name"); ?>
<a href = 'add/' id='addInfo'>Add info</a>

到目前为止，这是我的jQuery代码：

var current = 1;
$('#addInfo').click(function(){            
    var newField = '<h4>Info#' + current + '</h4>';
    $('#info').append(newField)
    current++;
    return false;
});

我提出的解决方案之一就是手动创建javascript中的输入字段并将其分配给newField。我认为应该有一种方法可以创建第一个工作集，然后使用jQuery复制第一个内容，然后只增加新字段的计数。

谢谢！

Answer 1

我们的想法是计算所有现有字段并缓存该数字。

currentFields = $('#yourFormname input').size(); // caches

现在，您附加另一个文本字段，并根据您在上面计算的字段数为其指定名称。

$('#addInfo').click(function(){            
    $('#info').append('<input type="text" name="data[User]['+currentFields+'][first_name]"');
    currentFields++;
    return false;
});

的Presto！

最后，不是将字段作为字符串附加，而是克隆（）字段html，然后只需用新计算的名称替换它的名称属性。

Answer 2

感谢Andrew指出我正确的方向。我能够克隆表单，甚至添加一个链接来删除最后克隆的输入。此解决方案不需要我在javascript中生成表单，因此所有格式仍然完好无损且编写的代码更少。

我知道这会弄乱Auth组件，因为哈希会出错，我的表单会被黑洞化。我以后必须在后端手动清理它。基本上我将id为1的第一个字段替换为当前增量。我看到的三个地方需要唯一的名称和id是标签，输入名称和输入ID。我不知道是否有人有更好的替代这些html值的解决方案，但我必须来回转换它来取代它。

这是我的解决方案：

// HTML 
<div id="user">
     <div class="users">
          <h4>User #1</h4>
          <?php echo $form->input("User.1.first_name", array(
                    'label' => 'First Name',
                    'error' => 'Please enter a valid first name.'
                ));?>

           <?php echo $form->input("User.1.last_name", array(
                    'label' => 'First Name',
                    'error' => 'Please enter a valid last name.'
                ));?>
     </div>
</div>

<div id="moreUsers"></div>

// Javascript代码：

var currentUserCount = 1;

$('#addUser').click(function(){
            currentUserCount = cloning('#user', '#moreUser', currentUserCount);
            return false;
        });

$('#removeUser').click(function(){
                $('.users:last').remove();
                currentUserCount--;
            }
            return false;
        });

    function cloning(from, to, counter) {
                var clone = $(from).clone();
                counter++;

                // Replace the input attributes:
                clone.find(':input').each(function() {
                    var name = $(this).attr('name').replace(1,counter);
                    var id = $(this).attr('id').replace(1,counter);
                    $(this).attr({'name': name, 'id': id}).val('');
                });

                // Replace the label for attribute:
                clone.find('label').each(function() {
                    var newFor = $(this).attr('for').replace(1,counter);
                    $(this).attr('for', newFor);
                });

                // Replace the text between html tags:
                clone = clone.html().replace(1,counter);
                $(to).before(clone);
                return counter;
            } // end cloning

Answer 3

这是在搜索时发现此问题的人的注释（就像我一样）。

要使输入名称“可克隆”，您不必保持增量并执行此丑陋的连接。 CakePHP识别空值并将其转换为[]，这更优雅，因为浏览器和服务器将为您执行输入枚举作业。

这是我正在谈论的一个例子：

echo $form->input("User..first_name"); 
echo $form->input("User.first_name.");

这将分别为您提供：

<input name="data[User][][first_name]">
<input name="data[User][first_name][]">

然后您可以使用Javascript来克隆，清理和追加节点。这是一个简化的例子：

var container=document.getElementById('info');
var element=wrapper.getElementsByTagName('input')[0];
var clone=element.cloneNode(true);
var clone_inputs=clone.getElementsByTagName('input');
for (var i=0; i<clone_inputs.length; i++) {
    clone_inputs[i].value='';
}
var result=container.appendChild(clone);

无需执行.replace()或data[User]['+currentFields+'][first_name]，这是一个更灵活，同时也不那么难看的解决方案。

更新此外，如果您在启用Security Component的情况下使用form tampering prevention，则可能需要解锁这些输入以防止提交被黑名单：

$this->Form->unlockField('User.first_name'); // no trailing dot
echo $this->Form->input("User.first_name.");

希望这有帮助。

如何使用jQuery和$ form helper添加新的表单字段？

3 个答案: