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.
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Czerwiec 2023).
Data publikacji: 29.08.2017 r. Tagi: jquery, formularz. Źródło obrazka porady: Pixabay.