JQUERY: добавить больше элементов при вставке новых данных
Я разрабатываю приложение с использованием CakePHP 1.3. Теперь я хочу сделать «функцию вставки», чтобы добавить нового пользователя в базу данных. У меня есть 2 поля пользователя & перейти к вставке. Но я не только вставляю 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 какая-то функция для добавления нового элемента, и как я могу увеличить порядковый номер, следуя приведенной выше схеме? Данные [ModelName] [0] [имя_поль]
Спасибо за ваше мнение и предложение.
Решение
Я создал этот код, вот он, я протестировал его, и он работает
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>Другие решения
Просто напишите код jQuery, чтобы добавить поле пользователя. а также отправить идентификатор данных в 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);
Обратите внимание, что дважды проверьте входную строку, я мог бы пропустить кавычку или
что-нибудь.
Спасибо за все ответы по этому поводу, я не проверял ваш код, но я нашел способ добавить и увеличить номер индекса тоже. Когда у меня будет время, я буду исследовать ваш код.
Мой код следовать этой теме 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>
Демо вы можете увидеть по этой ссылке выше.
Еще раз всем спасибо.
detector