Question

我正在使用CakePHP 1.3开发应用程序现在我想制作＆＃34;插入功能＆＃34;将新用户添加到数据库中。我有2个字段用户＆amp;传递到插入。但我不仅插入1个用户，我想插入一个或多个用户（可选）。如果我想添加更多用户，我会点击＆＃34;添加更多＆＃34;在视图中添加新字段。

在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]

感谢您的意见和建议。

Answer 1

我已经创建了这个代码，在这里，我已经测试了它并且它可以正常工作

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

var $insertBefore = $('#insertBefore');
var $i = 0;
$('#plusButton').click(function(){
  $i = $i+1;
  $('<br><div class="Index">User N. ' + $i + '</div><br>Username:<br><input type="text" id="Modelname' + $i + 'Fieldname" name="**data[Modelname][' + $i + '][fieldname]**"><br>Password:<br><input type="text" id="Modelname' + $i + 'Password" name="**data[Modelname][' + $i + '][Password]**"><br>').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;
}

<html>
<head>
  <title>Add New Users</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>  
<body>  
  <form action="your-script.php" method="post" id="Userlist">
    <div class="Index">User N. 0</div>
     Username:<br>
      <input type="text" id="Modelname0Fieldname" name="**data[Modelname][0][fieldname]**"">
      <br>Password:<br>
      <input type="text" id="Modelname0Password" name="**data[Modelname][0][Password]**">
    <br>
    <div id="insertBefore"></div>
    <br><br><input type="submit" value="Add User">
  </form>
  <div id="plusButton">+</div>
  
</body>
</html>

一些重要的注意事项：

1- id="insertBefore"的div只是告诉jQuery在哪里放置新的重复字段。

2- jQuery代码使用从0开始的索引变量（$i），并在每次点击“+”按钮时增加1（所以第一次点击时，它应该得到到1）

3-每次点击+按钮时，都会打印原始表格的代码（默认情况下值为0），但用0替换html代码中的每个'+$i+'

3.2 - 如果您对表单代码进行了一些更改，通过此方法，您也应该更改javascript代码。我知道这不是一个优雅的解决方案，但它也不应该那么困难，只要记住复制确切的HTML代码，删除所有intro并替换所有0的'+$i+'

4-“指数N” div只是跟踪用户的号码，你可以把你自己的文本放在那里，比如“用户Nº0”，在jQuery代码中用0替换值$i

5-您可以通过在if($i<10){}函数中创建.click()变量来限制可以添加的用户数（例如：10）

Answer 2

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

比如说。在你的形式。

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

在jquery.you中可以点击添加用户

获得这样的功能

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);

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

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('<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--;
    })
});

和HTML：

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

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

再次感谢大家。

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

3 个答案: