How to make a new input field appear after choosing one option from a dropdown-CodePudding

I have to make a form with some input options and one of them being a Type Switcher (dropdown) that shows me some options and depending on the option I choose it has to appear a new input for me to write that info. This is a project in PHP, MySQL, HTML and CSS. I can use JS, Jquery, React but for the PHP U need to use OOP aproach.

Example:
Type Switcher (Car / Bike / Truck) <-- this being my 3 options of a dropdown.

If I choose car, I need a new inputfield to put the model of the car. If I choose Bike, I need a new inputfield to put the model of the bike.

Example if I choose a car:
Type Switcher: CAR
Car model:
please provide the model of the car

My switcher:

<div >
  <div >
     <label for="productType">Type Switcher</label>
        <select name="Select Type" id="productType" >
        <option value="car">car</option>
        <option value="truck">truck</option>
        <option value="bike">bike</option>
     </select>
  </div>
</div>

by selecting car for example, I need to appear a new input bar with some label "please provide the model of the car" so I can write the model of the car

CodePudding user response：

you can add input field using js

html

    <div >
        <div >
           <label for="productType">Type Switcher</label>
              <select name="Select Type" id="productType" onclick="addField()" >
              <option value="car">car</option>
              <option value="truck">truck</option>
              <option value="bike">bike</option>
           </select>
        </div>
        <div id="text"></div>
      </div>
    
  <script src="index.js"></script>

const field=document.getElementById('text');
const model=document.getElementById('productType')
function addField(){
    let html=`<label>${model.value} Model:</label><input type="text"></input>`
    field.innerHTML=html;
}