Jak poprawnie sklonować formularz za pomocą jQuery?
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.
