kopiowanie sekcji formularza

Mam stronkę, na której znajduje się formularz. Składa się on z 2 części: stała oraz zmienna. Część stała to elementy typu input, które wypełnia się tylko raz. Natomiast część zmienna to coś w rodzaju listy osób. Czyli wypełniam imię + nazwisko, a potem klikam "dodaj kolejną osobę".

Pierwotne założenie było takie, że dane jednej osoby wyświetlają się jako element fieldset. Myślałem, żeby po kliknięciu przycisku cała taka sekcja się kopiowała. Potem ją wypełniamy i wedle potrzeby dodajemy jeszcze jedną osobę. Lista po prostu na bieżąco będzie uaktualniana.

I faktycznie, używając kodu formatka = oryginal.cloneNode(true); to działa. Tylko problem polega na tym, że nie ma jak zmienić nazw (name) poszczególnych pól formularza. Docelowo dane takie chcę wysłać do kodu PHP i wygenerować plik PDF. Oczywiście walidacja poszczególnych pól będzie. Przykładowo:
pole na telefon - przejdą tylko cyfry
pole na imię - przejdą tylko litery
Zakładam, że to wystarczy jeżeli chodzi o zagrożenia związane z "wstrzykiwanie" kodu.

W każdym razie co będzie lepsze:
a) stworzyć tablicę z obiektami JSON, do której po każdym kliknięciu będą wrzucane dane z formularza (pytanie tylko, czy odczytam to z poziomu PHP)
b) wstawiać na chama całą sekcję za pomocą innerHTML, gdzie bez problemu będę mógł nadawać każdemu polu unikalną nazwę

A może da to się zrobić prościej, nie koniecznie w JS/HTML? jQuery odpada.

Co znaczy, że nie ma jak zmienić nazwy (name)? Przecież można:

document.getElementById("idElementu").name = "nazwa";

Problem polega na tym, że po sklonowaniu danej sekcji będę miał więcej niż jeden element o id = idElementu.

Jeżeli chodzi o bezpieczeństwo, to walidacja formularzy z poziomu JS wystarczy? Czy dodać coś po stronie PHP?

kosmonauta80 napisał(a):

Jeżeli chodzi o bezpieczeństwo, to walidacja formularzy z poziomu JS wystarczy? Czy dodać coś po stronie PHP?

Walidacja formularzy w JS nigdy nie wystarczy. W JS możesz ew. wstępnie walidować dla wygody użytkownika, żeby od razu widział, że wprowadzona wartość jest niepoprawna. Ale jak użytkownik zechce, to ci każdą JS-ową walidację obejdzie i wyśle na serwer, co tylko zechce.

Ja myślałem zrobić tak, że dopóki JS nie stwierdzi "dane są ok", dopóty przycisk Submit będzie ustawiony jako disabled. Czyli nieaktywny.

Właśnie o tym też pomyślałem. Skoro ja mogę manipulować stroną za pomocą narzędzi deweloperskich (a takie ma przeglądarka), to ktoś inny - bardziej doświadczony - również. Czyli po stronie php tak czy inaczej dodam zabezpieczenie. Zdaje się, że są funkcje, które znaki typu "<" zamieniają na postać nieszkodliwą.

Co do pierwotnego problemu, to chyba faktycznie tak to najlepiej zrobić: na dzień dobry wrzucam sekcję na jedną osobę. Potem łapę ją poprzez getelementbyID, klonuję, zmieniam ID tego co już istnieje, dopiero teraz wrzucam klona i od nowa. Jeszcze raz: złap, sklonuj, zmień ID, wstaw nowe.

Jak bym użył frameworka, to też bym musiał tyle rzeźbić? Póki co uczę .NET.

Za dużo rzeźbienia wychodzi, jeżeli ograniczę się do JS. Wymyśliłem lepszy sposób :)

Każda osoba to sekcja fieldset. Założyłem, że maksymalna liczba osób to powiedzmy 10. Tyle razy to skopiowałem w HTML - póki co kod ładny i czytelny, powtarzalny. Następnie w CSS chowam to (display none), a za pomocą przycisku "Dodaj kolejną osobę" inkrementuję licznik, który z kolei ustawia display z powrotem na block.

Jak obejść taki problem:

licznik++;
let uczestnik = "osoba_" + licznik;
uczestnik.style.display = "block";

Powyższe nie działa. Na razie zrealizowałem to instrukcja switch, aczkolwiek czuję, że można to zrobić bardziej elegancko.