Сама форма:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Обработчик (необходимо подключить jQuery):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$('#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; }); |
Источник: http://jsfiddle.net/ew3uwL8b/4/