Dobór formularzy na podstawie pól w liście rozwijalnej

Question

Witam, zaczynam przygodę z javascript i mam takie głupie pytanie:
Jak dobrać formularze na stronie po wyborze opcji z listy rozwijalnej? tzn: Wybieram "Rowery" i pokazują się inputy do parametrów rowera, wybieram "Tiry" i pokazują się inputy dostosowane do tira etc.

Myślę, że nie ma sensu tworzyć osobnych plików do każdego forma... a powyższy pomysł da się zrobić, ale nawet nie potrafię wyszukać takiego problemu na stacku czy tutaj.. Naprowadzi/zasugeruje ktoś coś?
Pozdrawiam.

Answer 1

API DOM pozwoli Ci na dodawanie elementów HTML w trakcie działania strony (lub znajomość bibliotek takich jak React czy jQuery które to ułatwiają)
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Co do wczytywania odpowiednich rzeczy zapewne potrzebna będzie Ci funkcja fetch do pobierania danych i znajomość Promise

Comments

Dzięki, zdecydowanie się rozjaśniło, choć natrafiłem na jeszcze jeden mały problem:
Mam listę select:
 

      <label>Wybierz z listy:</label>
<select type="text" id="select" onchange="formFunction()">
  <option value="laptopy">Laptopy</option>
  <option value="telefony">Telefony</option>
  <option value="monitory">Monitory</option>
  <option value="aparaty">Aparaty</option>
  <option value="modemy">Modemy</option>
  <option value="peryferia">Peryferia</option>
  <option value="licencje">Licencje</option>
  <option value="drukarki">Drukarki</option>
</select>

i kod js:
 

<script>
function formFunction() {
const currentDiv = document.getElementById("div1");
const input1 = document.createElement("input");
const input2 = document.createElement("input");
const input3 = document.createElement("input");
const input4 = document.createElement("input");
const newlabel1 = document.createElement("Label");
const newlabel2 = document.createElement("Label");
const newlabel3 = document.createElement("Label");
const newlabel4 = document.createElement("Label");
if(document.getElementById('select').value == "laptopy") {
    //element.node.removeChild(node);

    document.body.insertBefore(newlabel1, currentDiv);
    newlabel1.innerHTML = "Firma:";
    document.body.insertBefore(input1, currentDiv);
    document.body.insertBefore(newlabel2, currentDiv);
    newlabel2.innerHTML = "Model:";
    document.body.insertBefore(input2, currentDiv);
    document.body.insertBefore(newlabel3, currentDiv);
    newlabel3.innerHTML = "Procesor:";
    document.body.insertBefore(input3, currentDiv);
    document.body.insertBefore(newlabel4, currentDiv);
    newlabel4.innerHTML = "RAM:";
    document.body.insertBefore(input4, currentDiv);
  }

  if(document.getElementById('select').value == "telefony") {
    document.body.insertBefore(newlabel1, currentDiv);
    newlabel1.innerHTML = "xx:";
    document.body.insertBefore(input1, currentDiv);
    document.body.insertBefore(newlabel2, currentDiv);
    newlabel2.innerHTML = "xx:";
    document.body.insertBefore(input2, currentDiv);
    document.body.insertBefore(newlabel3, currentDiv);
    newlabel3.innerHTML = "x:";
    document.body.insertBefore(input3, currentDiv);
    document.body.insertBefore(newlabel4, currentDiv);
    newlabel4.innerHTML = "x:";
    document.body.insertBefore(input4, currentDiv);
    
  }


  if(document.getElementById('select').value == "monitory") {
    alert("zmienna: monitory");
    
  
  }
  
  }

  

</script>

I chcę uzyskać efekt, by po wybraniu listy pokazał się form. Jednak u mnie się dodają w nieskończoność xd
Można użyć replaceChild(), ale raz trzeba wszystko stworzyć przez insertBefore. Próbowałem też usuwać przez removeChild() zanim się stworzą, na początku każdego if, ale nie działa...
Czy dobrze myślę by dalej brnąć w te elementy?