Задача: Сделать неограниченное кол-во добавлений параметров в форму.
Для начала у нас будет вот такая простая форма, с парой параметров и кнопкой добавить и удалить
<form action="" method="post" name="Form">
<div id="DynamicExtraFieldsContainer">
<div id="addDynamicField">
<input type="button" id="addDynamicExtraFieldButton" value="Добавить динамическое поле">
</div>
<div class="DynamicExtraField">
<br>
<label for="DynamicExtraField">Доп. поле</label>
<input value="Удаление" type="button" class="DeleteDynamicExtraField">
<br>
<textarea name="DynamicExtraField[]" cols="50">test</textarea>
</div>
</div>
</form>
Вот как выглядит данная форма без js
А теперь самое интересное, подключаем jquery и её интересные возможности.
$('#addDynamicExtraFieldButton').click(function(event) {
addDynamicExtraField();
return false;
});
function addDynamicExtraField() {
var div = $('<div/>', {
'class': 'DynamicExtraField'
}).appendTo($('#DynamicExtraFieldsContainer'));
var br = $('<br/>').appendTo(div);
var label = $('<label/>').html("Доп. поле ").appendTo(div);
var input = $('<input/>', {
value: 'Удаление',
type: 'button',
'class': 'DeleteDynamicExtraField'
}).appendTo(div);
input.click(function() {
$(this).parent().remove();
});
var br = $('<br/>').appendTo(div);
var textarea = $('<textarea/>', {
name: 'DynamicExtraField[]',
cols: '50',
rows: '3'
}).appendTo(div);
}
//Для удаления первого поля. если оно не динамическое
$('.DeleteDynamicExtraField').click(function(event) {
$(this).parent().remove();
return false;
});
Обратите внимание, на то как добавляются input, label и другие параметры. Маленький кусок кода, а сколько полезного он делает. В итоге у нас получается форма, с кнопками добавления и удаления динамических полей в форме. Результат можно посмотреть тут
В итоге форма отправит нам переменную с массивом данных, которую элементарно можно будет получить.
var_dump($_POST["DynamicExtraField"]);
Нашел интересное решение, с использованием Bootstrap,
Update 2020.05.06 Можно было написать немного красивей и без использований кучи переменных, так как они там не нужны (var)
