Jak poprawnie sklonować formularz za pomocą jQuery?

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Przy klonowaniu formularza za pomocą jQuery możemy trafić na problem. Funkcja clone() kopiuje cały formularz, natomiast bez żadnych wartości.

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.

Kategorie: HTML + CSS. Tagi: #jquery, #formularz. Źródło obrazków: Pixabay, Font awesome.