JQUERY:插入新数据时添加更多项目 [英] JQUERY: Add more item when insert new data
问题描述
我正在使用CakePHP 1.3开发该应用程序.现在，我想进行插入功能"以将新用户添加到数据库中.我有2个字段用户&通过插入.但是我不仅要插入1个用户，而且要插入一个或多个用户(可选).如果要添加更多用户，我将单击添加更多"以在视图中添加新字段.
I am developing the app using CakePHP 1.3 Now I want to make the "Insert function" to add new user into database. I have 2 fields user & pass to insert. But I not only insert 1 user, I want insert one or multiple user (optional). If I want to add more user I will click to "add more" to add new field in view.
在cakephp中，当我们要插入包含多个数据的数组时需要它.字段名称将定义为:
In cakephp, it required when we want to insert a array with multiple data. The field name will be define as:
<?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]
My question is: Does JQuery have some function to add new element and how can I increase the index number follow the pattern above data[Modelname][0][fieldname]
感谢您的意见和建议.
推荐答案
我已经创建了这段代码，在这里，我已经对其进行了测试，并且可以正常工作
I've created this code, here it is, I've tested it and it works
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将新的重复字段放在何处.
1- The div who's id="insertBefore" is just to tell jQuery where to put the new duplicated fields.
2- jQuery代码使用以0开头的索引变量($i)，并且每次在"+"按钮上每次单击时都递增1(因此，第一次单击时，它应该变为1 )
2- The jQuery code works with an index variable ($i) that starts in 0 and gets incremented by 1 on each new click on the "+" button (so the first time you click, it should get to 1)
3-每次单击+按钮时，都会打印原始表单的代码(默认值为0)，但用'+$i+'
3- The original Form's code (where value is 0 by default) is printed everytime the + button is clicked, but replacing each 0 in the html code by '+$i+'
3.2-如果您通过这种方法对表单代码进行了一些更改，则还应该更改javascript代码.我知道这样做不是一个很好的解决方案，但是也不应该那么困难，只需记住复制确切的html代码，删除所有intro并将所有0替换为'+$i+'
3.2 - If you make some changes to the code of your form, by this method, you should change the javascript code as well. I know it's not an elegant solution to do this, but it shouldn't be so difficult either, just remember to copy the exact html code, delete all intro's and replace all 0's with '+$i+'
4-索引N". div只是跟踪用户的号码，您可以在其中放置自己的文本，例如"UserNº0"，并在jQuery代码中将0替换为$i
4- The "Index N." div is just keeping track of the user's number, you could put your own text there, like "User Nº 0" and in the jQuery code replace the 0 with the value of $i
5-您可以通过在.click()函数内创建if($i<10){}变量来限制可以添加的用户数量(示例:10)
5- You could put a limit to the number of users (example:10) that can be added by creating an if($i<10){} variable inside the .click() function
这篇关于JQUERY:插入新数据时添加更多项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
