Php JQUERY：插入新数据时添加更多项

我正在使用CakePHP1.3开发应用程序，现在我想使用“插入函数”将新用户添加到数据库中。我有两个字段要插入用户和密码。但我不仅要插入1个用户，还要插入一个或多个用户（可选）。如果我想添加更多用户，我将单击“添加更多”在视图中添加新字段

在cakephp中，当我们想要插入一个包含多个数据的数组时，它是必需的。字段名称将定义为：

<?php
   echo $this->Form->input('Modelname.0.fieldname');
   echo $this->Form->input('Modelname.1.fieldname');
?>

我们的目标是：

<input type="text" id="Modelname0Fieldname" name="**data[Modelname][0][fieldname]**">
<input type="text" id="Modelname1Fieldname" name="**data[Modelname][1][fieldname]**">

我的问题是：JQuery是否具有添加新元素的功能，以及如何按照上面的模式增加索引号data[Modelname][0][fieldname]

---

感谢您的意见和建议。

只需编写jQuery代码来附加用户字段。并将数据id发送到javascript

比如说。以你的形式

<div id="segment">
    $this->Form->input('User.1.name',array('class'=>'user','data-id'=>1));
</div>

$this->Form->input（'User.1.name'，array（'class'=>'User'，'data-id'=>1））；

在jquery.com中，单击add user（添加用户）可以实现如下功能

var lastid = parseInt($('.user:last').attr('data-id');
var newid = lastid+1;

var input = "<input name='data[User][" + newid + "][name]' class='user' id='user-" + newid + "' data-id='" + newid + "' type='text'><br/>";
$('#segement').append(input);

var lastid=parseInt（$（'.user:last'）.attr（'data-id'）；
var newid=lastid+1；
var input=“
”；
$（'#segment'）。追加（输入）；

请注意，仔细检查输入字符串，可能会遗漏引号或 什么都行

---

只需编写一个jQuery代码来附加一个用户字段，并将数据id发送到javascript

比如说，以你的形式

<div id="segment">
    $this->Form->input('User.1.name',array('class'=>'user','data-id'=>1));
</div>

$this->Form->input（'User.1.name'，array（'class'=>'User'，'data-id'=>1））；

在jquery.com中，单击add user（添加用户）可以实现如下功能

var lastid = parseInt($('.user:last').attr('data-id');
var newid = lastid+1;

var input = "<input name='data[User][" + newid + "][name]' class='user' id='user-" + newid + "' data-id='" + newid + "' type='text'><br/>";
$('#segement').append(input);

var lastid=parseInt（$（'.user:last'）.attr（'data-id'）；
var newid=lastid+1；
var input=“
”；
$（'#segment'）。追加（输入）；

请注意，仔细检查输入字符串，可能会遗漏引号或 什么都行

---

我已经创建了这段代码，在这里，我已经测试了它，它可以工作了

var$insertBefore=$（'#insertBefore'）；
var$i=0；
$（“#plusButton”）。单击（函数（）{
$i=$i+1；
$（'
用户N.+$i+'
用户名：

密码：

）.insertBefore（$insertBefore）；
})；

#用户列表{
边框样式：实心；
宽度：300px；
保证金：0自动；
文本对齐：居中；
填充：0.5em；
}
.索引{
背景颜色：灰色；
文本对齐：左对齐；
}
#加钮扣{
背景颜色：绿色；
颜色：白色；
字号：1.9em；
宽度：300px；
保证金：0自动；
文本对齐：居中；
光标：指针；
}

添加新用户
用户编号：0
用户名：

我已经创建了这段代码，在这里，我已经测试了它，它可以工作了



var$insertBefore=$（'#insertBefore'）；
var$i=0；
$（“#plusButton”）。单击（函数（）{
$i=$i+1；
$（'
用户N.+$i+'
用户名：

密码：

）.insertBefore（$insertBefore）；
})；
#用户列表{
边框样式：实心；
宽度：300px；
保证金：0自动；
文本对齐：居中；
填充：0.5em；
}
.索引{
背景颜色：灰色；
文本对齐：左对齐；
}
#加钮扣{
背景颜色：绿色；
颜色：白色；
字号：1.9em；
宽度：300px；
保证金：0自动；
文本对齐：居中；
光标：指针；
}

添加新用户
用户编号：0
用户名：

谢谢所有关于这个的答案，我没有测试你的代码，但是我也找到了附加和增加索引号的方法。当我有时间的时候，我会研究你的代码

我的代码是遵循这个线索。他使它容易理解

JS：

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

以及HTML：

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>


添加更多字段

您可以在上面的链接中看到演示

再次感谢大家。
感谢所有关于这方面的答案，我没有测试你的代码，但我也找到了附加和增加索引号的方法。当我有时间时，我会研究你的代码

我的代码是遵循这个线索。他使它容易理解

JS：

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

以及HTML：

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>


添加更多字段

您可以在上面的链接中看到演示

再次感谢大家