Jak poprawnie sklonować formularz za pomocą jQuery?

HTML + CSS

Bartosz Stefanicki, 22.04.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.

#jquery, #formularz. Źródło obrazków: Pixabay, Font awesome.

Szukasz hostingu?

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

Komentarze

Ostatnie komentarze

Statystyki

  • 199

    Liczba porad
  • 1 997

    Liczba komentarzy
  • 5

    Narzędzi online

© 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.