Задача: Сделать неограниченное кол-во добавлений параметров в форму.
Для начала у нас будет вот такая простая форма, с парой параметров и кнопкой добавить и удалить
<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)