Динамическое добавление input в форму

Сама форма:

<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>

</div>

<br>

<br>

</div>

</form>

Обработчик (необходимо подключить 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;
            });

$('#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/

Добавить комментарий Отменить ответ