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

我正在使用CakePHP 1.3开发应用程序现在我想制作“插入函数”以将新用户添加到数据库中。 我有2个字段用户并传递给插入。 但我不仅插入1个用户，我想插入一个或多个用户（可选）。 如果我想添加更多用户，我将点击“添加更多”以在视图中添加新字段。

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

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

并且在视野中将是：

我的问题是：JQuery是否有一些函数来添加新元素，如何根据上面的模式增加索引号[Modelname] [0] [fieldname]

感谢您的意见和建议。

Answer 1

我已经创建了这个代码，在这里，我已经测试了它并且它有效

http://codepen.io/anon/pen/xbxVQG

 var $insertBefore = $('#insertBefore'); var $i = 0; $('#plusButton').click(function(){ $i = $i+1; $('
User N. ' + $i + '

Username:

Password:

').insertBefore($insertBefore); }); 

 #Userlist{ border-style:solid; width: 300px; margin: 0 auto; text-align:center; padding: 0.5em; } .Index{ background-color:grey; text-align:left; } #plusButton { background-color:green; color: white; font-size:1.9em; width: 300px; margin: 0 auto; text-align:center; cursor: pointer; } 

       
 
User N. 0
 Username:
  
Password:
  
 
 

 
 
+
   

Answer 2

只需编写一个jQuery代码来附加用户字段。 并将data-id发送到javascript。

比方说吧。 在你的forms。

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

在jquery.you中点击添加用户可以有这样的function，

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

请注意，仔细检查输入字符串，我可能会错过报价或任何内容。

Answer 3

感谢所有关于此的答案，我没有测试你的代码，但我找到了追加和增加索引号的方法。 当我有时间时，我会研究你的代码。

我的代码遵循这个主题http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery 。 他很容易理解。

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('
Remove
'); //add input box } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); 

和HTML：

 
 Add More Fields 
  

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

再次感谢大家。