Jak poprawnie sklonować formularz za pomocą jQuery?

Bartosz

Bartosz Stefanicki Sobota, 6.01.2024

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.

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Marzec 2024).

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

Komentarze


© 2005-2024 itporady.pl. Wszystkie prawa zastrzeżone.

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.