Generowanie formularza

Question

Chciałbym zapytać co mam zrobić gdy mam jakiś formularz i po wybraniu np. opcji pierwszej wygenerował się kolejny formularz odpowiadający wybranej opcji. W przykładowym kodzie pokazałem co i jak.

//mój kod

	<label for="lista-z-wyborem">opis</label>
	<select id="lista-z-wyborem">
		<option></option>
		<option>opcja-1</option>
		<option>opcja-2</option>
		<option>opcja-3</option>
		<option>opcja-4</option>
	</select>
	<br>
	<button onclick="wybierz()">Wybierz</button>

	<script>
		function wybierz()
		{
			???
		}
	</script>

//po wybraniu opcji i kliknięciu "wybierz"
//chcę aby wygenerował się formularz
//w zależności od wybranej opcji np.

    //gdy wybiorę "opcja-1"
    <label for="lista-dla-opcji-1">opis</label>
	<select id="lista-dla-opcji-1">
		<option>a</option>
		<option>b</option>
		<option>c</option>
		<option>d</option>
		<option>e</option>
	</select>

    //gdy wybiorę "opcja-2"
	<label for="lista-dla-opcji-2">opis</label>
	<select id="lista-dla-opcji-2">
		<option>a</option>
		<option>b</option>
		<option>c</option>
		<option>d</option>
		<option>e</option>
	</select>

    //gdy wybiorę "opcja-3"
	<label for="lista-dla-opcji-3">opis</label>
	<select id="lista-dla-opcji-3">
		<option>a</option>
		<option>b</option>
		<option>c</option>
		<option>d</option>
		<option>e</option>
	</select>

    //gdy wybiorę "opcja-4"
	<label for="lista-dla-opcji-4">opis</label>
	<select id="lista-dla-opcji-4">
		<option>a</option>
		<option>b</option>
		<option>c</option>
		<option>d</option>
		<option>e</option>
	</select>

 

Answer 1

Przykładowy kod:

CSS

  .option-based-select {
    display: none;
  }

  .option-based-select--is-visible {
    display: block;
  }

HTML

<select id="main-select">
  <option value="option-1">opcja-1</option>
  <option value="option-2">opcja-2</option>
</select>

<select class="option-based-select" id=option-1>
    <option>Opcja pierwsza</option>
    <option value="option-1">opcja-1</option>
    <option value="option-2">opcja-1</option>
    <option value="option-3">opcja-3</option>
</select>

<select class="option-based-select" id="option-2">
    <option>Opcja druga</option>
    <option value="option-1">opcja-1</option>
    <option value="option-2">opcja-1</option>
    <option value="option-3">opcja-3</option>
</select>

JS

<script>
  $('#main-select').change(function() {
    const selectedValue = $(this).val()

    $('.option-based-select--is-visible').removeClass('option-based-select--is-visible')
    $(`#${selectedValue}`).addClass('option-based-select--is-visible')
  })
</script>

O co tutaj chodzi? 

Wszystkim elementom select które mają być wyświetlone opcjonalnie dodajemy klasę "option-based-select" czyli po prostu ukrywamy je. W momencie wybrania danej opcji z głównego elementu select (ten o ID main-select) pobieramy wybraną wartość za pomocą kontekstu "this" (chyli elementu który wywołał zdarzenie). Następnie chowamy wszystkie wcześniej widoczne selecty (jeśli takie są) poprzez usunięcie klasy "option-based-select--is-visible" a na końcu pokazujemy select który ma ID taki sam jak wybrana wartość poprzez dodanie klasy "option-based-select--is-visible".

Answer 2

Witaj, ja zaproponowałbym Ci następujący schemat działania, w swoim pliku .js mógłbyś w zmiennych trzymać template różnych wersji formularza np

const form1 = document.createElement('form');

form1.innerHTML = `wnętrze danego formularza - zwykły html`;

Mógłbyś pobrać referencje do tego głównego formularza, dodać na niego listener na "submit", w nim pobrać referencje do selecta znajdującego się wewnątrz niego, sprawdzać value tego selecta i w zależności jakie jest to value to dodawać dany formularz do strony za pomocą appendChild.

Tutaj mały przykład o co mi chodzi, żeby nie było za łatwo zamiast formularzy dodaje divy w odpowiednich kolorach, ale mam nadzieje, że zrozumiesz mój zamysł i z łatwością poradzisz sobie z Twoim zadaniem ;)

Widzę, że korzystasz z przestarzałych standardów JS's(dodawanie zdarzeń w HTML'u) więc podaje linki do wyjaśnień rzeczy których użyłem w tym przykładnie:

• const
• querySelector
• addEventListener
• preventDefault
• appendChild/createElement
• classList
• template strings
• i na koniec coś o select

Gdybyś czegoś nie rozumiał to pisz śmiało;) 

Answer 3

Najłatwiej to ustawiając odpowiednią klasę(.show lub .hide) lub style (display:block;  dla wybranego selecta i display:none; dla pozostałych). Po pierwsze każdą listę opcji (label i select) umieść w divie - kontenerze któremu nadaj id. Po drugie do "lista-z-wyborem" do każdej opcji dodaj wartość value. W value  możesz przechowywać id do każdego z kontenerów. Po trzecie w przypadku select lepiej stosować "onchange". Po czwarte w funkcji "wybierz" musisz pobrać wartość value która będzie wskazywać na wybrany kontener(z wybranym selectem). I na koniec wystarczy ustawić odpowiednie style lub klasę na podstawie tej wartości. To taki najprostszy sposób. Oczywiście sposobów na to jest więcej ale trudniej je wytłumaczyć.

Comments

A co w przypadku gdy ktoś będzie grzebał w kodzie f12 i  w stylach odznaczy display:none  lub zmieni na display: block? Wtedy ukaże nam się cały formularz którego nie  chcielibyśmy ukazać. A co w przypadku nie zabezpieczenia się przed wysłaniem konkretnego wyboru? Wtedy można z łatwością dodać pozostałe pola  lub  wysłać  wszystko do bazy danych. Jest jeden serwis w pl sklep internetowy gdzie nie można było zmienić e-maila bo było z poziomu HTML nałożony na Input disabled=disabed ale gdy się go usunie to nadpisany e mail  zmienia się na nowy. Nie wiem bo nie sprawdzałem co w przypadku gdy zamiast e-maila wpisałbym cyfry czy przeszłoby to.

Osobiście wolałbym rozwiązanie takie gdzie jeżeli wybierasz select->option  ładuje się onchange z select - >option napisane w js

---

Główna zasada: wszystkie dane z formularzy powinny być walidowane po stronie backendu. A przed przesłaniem mogą być również sprawdzane przez js. Jeśli dodamy coś przez js to w przeglądarce również możemy to zmienić w taki sposób jak opisujesz. Dodawanie elementów z poziomu samego js też nie rozwiązuje problemu "ukrycia"  pozostałych części formularza bo do js też możesz zajrzeć. Jedyne rozwiązanie aby pozostałe części formularza były niewidoczne to pobieranie ich z serwera za pomocą Ajaxa.