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 class="type-switcher">
<div class="input-wrapper">
<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
you can add input field using js
html
<div class="type-switcher">
<div class="input-wrapper">
<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>
js
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;
}