Как бы я продублировал элементы формы И данные внутри них с помощью jQuery?

Question

См. Эту форму - http://schnell.dreamhosters.com/form.php

Эта форма содержит часть, в которую вы вводите данные, и можете добавить дополнительные данные, нажав кнопку «Добавить сайт», и онасделать еще один из этого раздела, чтобы войти на другой сайт.Это jQuery, который выполняет дублирование ...

$(function ()   {
    var sites = 1;
    var siteform = $("#site1").html();

    $(".addsites").live("click", function(e) {
        e.preventDefault();
        sites++;
        $("#events").append("<div id='site" + sites + "'>"
            + "<br /><hr><br />"
            + siteform
            + "<center><button class='removesites' title='site"
            + sites + "'>Remove This Site</button><br />"
            + "<button class='addsites'>Add Another Site</button>"
            + "</center></div>");           
    });

    $(".removesites").live("click", function(e) {
        e.preventDefault();
        var id = $(this).attr("title");
        $("#" + id).remove();
    });     
});

Дублирование работает отлично, но меня беспокоит одна вещь: когда мне приходится вводить данные для кого-то, требующего МНОГО сайтов, он оченьраздражает необходимость повторять одни и те же или похожие части этого раздела формы (например, каждый сайт находится в одном и том же городе, в один и тот же день, одним и тем же человеком и т. д.). Поэтому у меня возникла мысль, что при каждом дублировании значенияэлементы формы также переносятся, и я просто редактирую то, что не то же самое.Текущая реализация дублирует только элементы, а не данные.Я не уверен, как легко скопировать данные в новые разделы, и я не могу найти никаких инструментов jQuery для этого.

PS - эта часть не так важна, но я также рассмотрелиспользование этой же формы для загрузки данных обратно для просмотра / редактирования и т. д. Единственная проблема с этим заключается в том, что перепечатывание формы означает, что будет раздел формы с идентификатором «Site7» или чем-то, но jQuery запускает егонумерация на 1, всегда.Я думал об использовании селекторов, чтобы найти сайт с наибольшим номером и начать с переменной 'sites' с этим номером, но я не уверен, как это сделать.Буду очень признателен за любой совет, как это сделать, или за лучшую систему в целом.

Answer 1

Вы хотите перебрать поля ввода в форме сайта и сохранить их в объекте, используя атрибут имени в качестве ключа.

Затем после дублирования созданного вами объекта и поиска полей эквивланта в новой дублированной форме и установки их значений.

Что-то вроде этого (не проверено, просто идея)

var obj = new Object();

$("#site1 input").each(function(){
    obj[this.id] = this.value;
);

// Dupicate form

$.each(obj, function(key, value){
    $('#newform input[name="'+key+'"]').value = value;
});

Имейте в виду, что эти две функции () отличаются друг от друга.

http://api.jquery.com/jQuery.each/ http://api.jquery.com/each/

Answer 2

Вы можете использовать cloneNode для истинного клонирования предыдущего сайта-div и (передавая true в cloneNode) всех его потомков и их атрибутов.Просто знайте, что у клона будет тот же id, что и у оригинала, поэтому вам придется вручную установить его идентификатор впоследствии

Попробуйте это в вашей функции щелчка

var clone = $("#site" + sites).clone(true, true); // clone the last div
sites++; // increment the number of divs
clone.attr('id', "site" + sites); // give the clone a unique id
$("#events").append(clone); // append it to the container

---

Как указывает Скуззи в комментарии, jQuery имеет свой собственный метод clone() (я не часто использую jQuery, поэтому я не знал, иЯ не удосужился проверить, прежде чем ответить).Вероятно, лучше использовать метод jQuery, чем встроенный метод cloneNode DOM, поскольку вы уже используете jQuery для прослушивателей событий.Я обновил код

Answer 3

Не забудьте создать функцию для регистрации события! Это очень важно, потому что при загрузке DOM все новые атрибуты должны быть зарегистрированы в DOM.

Маленький пример:

<script>
    $(document).ready(function(){
        $('#click-me').click(function(){
            registerClickEvent();
        })

        function registerClickEvent(){
            $('<input type="text" name="input_field_example[]">').appendTo('#the-div-you-want')
        }

        registerClickEvent();
    })
</script>

Answer 4

Хорошо, я наконец понял это.Это, более или менее, расширение ответа Алекса Пакки.

        sites++;
        $("#events").append("<div id='site" + sites + "'>"
            + "<hr><br />"
            + siteform
            + "<center><button class='removesites' title='site"
            + sites + "'>Remove This Site</button><br />");
        $("#site1").find("input:checked, input:text, textarea, select").each(function() {
            var name = $(this).attr("name");
            var val = $(this).val();
            var checked = $(this).attr("checked");
            var selected = $(this).attr("selectedIndex");

            $('#site' + sites + ' [name="'+name+'"]').val(val);
            $('#site' + sites + ' [name="'+name+'"]').attr("checked", checked);
            $('#site' + sites + ' [name="'+name+'"]').attr("selectedIndex", selected);
        });

Я использовал дополнительные переменные для удобства чтения, но если вы этого не сделали, то все должно получиться так же хорошо, как и методы.

Answer 5

Запрос на передачу значений довольно прост (пожалуйста, проверьте селектор для всех правильных типов в форме): $("#site1").find("input[checked], input:text, input:hidden, input:password, input:submit, option:selected, textarea") //.filter(":disabled") .each(function() { $('#site2 [name="'+this.name+'"]').val(this.value); }