Как решить проблему добавления инпутов?

Question

Как решить проблему добавления инпутов?

Рейтинг: 1Ответов: 1Опубликовано: 13.02.2015

Ребят, помогите исправить!

Есть форма с инпутами. При нажатии на кнопку "добавить дополнительный номер" добавляется новая строка с телефоном и фио (это работает).

При нажатии на кнопку "добавить отдел. филиал" добавляет новый блок.

Проблема:

Если нажать на кнопку "добавить дополнительный номер", то добавлется 3-я строчка, и если затем нажать на кнопку "добавить отдел. филиал", то добавляется блок с 3-я строчками. Как сделать, чтобы всегда добавлялся блок с 2-я строчками?
При нажатии на кнопку "добавить дополнительный номер" в любом блоке она добавляется во все.
http://jsfiddle.net/unior27/k8ck2ega/2/

css html jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Проблема 1

Логично, что при нажатии на кнопку у Вас копируется каждый раз блок #otdel, именно в таком виде, в котором он на данный момент находится. Если в нем три #number_block, то он и скопирует три. Поэтому этот вопрос надо решать на уровне логики приложения. Нужен исходный вариант, тогда и храните исходный вариант.

    var otdel =  $("#otdel" ).clone();

    $('button.b2').click(function(){
        otdel.clone().appendTo( ".goodbye2" );
        return false;
    });

Проблема 2

Вы берете #number_block и копируете его во все блоки, которые содержат класс .goodbye3 кодом appendTo( ".goodbye3" ). Логично, что это поведение добавит код во все отделы. Если нужно добавить в один отдел, то и добавляйте в текущий.

$('button.b1').click(function(event){
        $("#number_block" ).clone().insertBefore( this );
        return false;
});

Проблема 3

Не забывайте, что вы копируете объекты без событий, поэтому надо еще к ним привязать события или воспользоваться функцией JQuery, которая копирует объекты вместе с событиями (к сожалению, я уже забыл, как это делать правильно).

Проблема 4

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

P.S. Решение первых двух: jsfiddle

Как решить проблему добавления инпутов?

Ответы