Jak poprawnie sklonować formularz za pomocą jQuery?

Porada może się przydać w różnych sytuacjach. W moim przypadku była to konieczność sklonowania formularza w celu wyświetlenia go w nowym oknie. Następnie zmieniałem style, a niektóre elementy usuwałem i umożliwiałem wydruk. Pojawił się jednak problem - funkcja clone() faktycznie skopiowała cały formularz, natomiast bez żadnych wartości. Jak to rozwiązać?

Pisząc wyżej "bez żadnych wartości" mam na myśli puste pola tekstowe, brak zaznaczeń w checkboxach i polach typu radio. Na szczęście można to szybko poprawić za pomocą poniższego kodu.

Klonowanie formularza

Aby przypisać do zmiennej kod formularza, bądź jakiejkolwiek innej klasy czy identyfikatora:

var cloned = $("#form").clone();

Poprawienie pól tekstowych

Każdemu inputowi po kolei przypisujemy odpowiednią wartość.

$("input").each(function() {
     $(this).attr('value', $(this).val());
});

Poprawienie bloków tekstowych

$("textarea").each(function() {
     $(this).text( $(this).val() )
});

Poprawienie zaznaczeń w checkboxach, radio

Jeśli pole jest zaznaczone to oznacz je jako "checked", w innym wypadku usuń "checked".

$("input").each(function() {
     if ($( this ).is(':checked')) {
         $( this ).attr('checked', 'checked');
     } else {
         $( this ).removeAttr('checked');
     }
});

To wszystko. Dzięki powyższym linijkom kodu byłem w stanie wyświetlić formularz wraz z jego wartościami. Tym sposobem sklonowałem formularz wraz z tym, co zostało do niego wcześniej wprowadzone.

Data publikacji: Wtorek, 29.08.2017. Tagi: jquery, formularz. Źródło obrazka porady: Pixabay.