Html Question posted in
Some basic documentation can be found here.

How can I create a dynamic form in HTML?

Im trying to create something like this https://docs.google.com/document/d/1wu2J2Jp4KAYEVyQ6B7KSGFp_7oeDttH7DwOPLMARfws/edit . Dynamic form that changes according to selection from dropdown menu.

<div class="typeSwitcher">
            <form class="#productType" id="productType" action="/product_type.php">
                <label for="type">Type Switcher</label>
                <select name="type" id="type" onchange="myFunction()">
                  <option value="DVD" id="#DVD" onchange="dvdFunction()">DVD</option>
                  <option value="Book" id="#Book" onchange="bookFunction()">Book</option>
                  <option value="Furniture" id="#Furniture" onchange="furnitureFunction()">Furniture</option>
                </select>
            </form>
        </div>
        <div class="descriptionForm" id="descriptionForm">
            <form id="demo">
                
            </form>
        </div>

I wanted to create three separate pages for each form and then iFrame it. kinda stuck here. I know i need to use addEventListener in JS. Cant figure out how. Any help is appreciated. Thanks

Tags:

2

Answers


  1. 0

    You can add the logic to replace the innerHTML of the .descriptionForm div, in myFunction().

    Note: you need to pass event in your myFunction on onchange as myFunction(event)

    For example:

    myFunction(event){
   const selectedValue = event.target.value
   const descriptionForm = document.getElementById("descriptionForm")

   switch(selectedValue){
     case "DVD":
       // add logic for showing dvd form
     case "Book":
       // add logic for showing book form
     case "Furniture":
       // add logic for showing furnitureform
   
  } 

}
    Login or Signup to reply.
  2. 0

    If you are using plain js, below option might be helpful for you to get started.

    <div class="descriptionForm" id="descriptionForm">
     <form id="demo">
        <subForm1 class="subform-test-class" id="DVD"></subForm1>
        <subForm2 class="subform-test-class" id="Book"></subForm2>
        <subForm3 class="subform-test-class" id="Furniture"></subForm3>
     </form>
</div>

    subForm elements will be your optional form components that you want to show to user.

    you can have a css class

    .subform-test-class{
   display:none
}

    and

    .subform-test-class.active{
display:block;
// if you want you can even add some basic animation to make the form appear nicely
}

    to manage the form value changes, switch your onChange statement to this.

       onchange="myFunction(this.value)"

    function myFunction(val) {
  document.getElementById(val).classList.add("active")
}

    keep in mind that I used id values which you used within the options, so you should remove from productType form select options. You dont need id for option values unless you have a reason for it.

    TO DO: in above onChange method, we are adding .active class to element so it becomes visible but you also need to implement a logic, if value changes again you need to remove active class from the previously selected element 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search