Динамическое добавление html блоков с помощью jquery

2014-08-09
5.0 / 5 (2 vote)

Давно уже не писал у себя в блоге, интересных мыслей много,  а вот времени к сожалению не очень. Сегодня хотелось бы рассказать и показать, как с помощью jquery сделать форму с динамическим добавление данных. А также рассмотреть интересные возможности jquery, упоминания которых я в интернете так и не нашел.

Задача: Сделать неограниченное кол-во добавлений параметров в форму.

Для начала у нас будет вот такая простая форма, с парой параметров и кнопкой добавить и удалить

<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 http://jsfiddle.net/ew3uwL8b/1/

А теперь самое интересное, подключаем 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 и другие параметры. Маленький кусок кода, а сколько полезного он делает. В итоге у нас получается форма, с кнопками добавления и удаления динамических полей в форме. Результат можно посмотреть тут http://jsfiddle.net/ew3uwL8b/4/

В итоге форма отправит нам переменную с массивом данных, которую элементарно можно будет получить.

var_dump($_POST["DynamicExtraField"]);

Нашел интересное решение, с использованием Bootstrap, тут 

Update 2020.05.06 Можно было написать немного красивей и без использований кучи переменных, так как они там не нужны (var) http://jsfiddle.net/m8v5qwed/1/

Read 8836 times Last modified on 2020-05-06

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.