- Joined
- May 12, 2023
- Messages
- 3
- Reaction score
- 0
I'm trying to create this https://docs.google.com/document/d/1wu2J2Jp4KAYEVyQ6B7KSGFp_7oeDttH7DwOPLMARfws/edit . I already have a form ready for data insertion to database. I just need to stylize it so that the form changes dynamically after selection change.
I'm trying to create it dynamic so that when you select something else, the previous fieldset changes to new one and the last selection disappears. Nothing works with my code. I tried traditional JS - same results. I already put the div as display:none in CSS. Maybe my syntax is wrong?
<form>
<fieldset>
<label for="#productType">Type Switcher</label>
<select id="#productType">
<option>--Select a Type</option>
<option value="DVD" id="#DVD" onchange="show(this)">DVD</option>
<option value="Book" id="#Book" onchange="show(this)">Book</option>
<option value="Furniture" id="#Furniture" onchange="show(this)">Furniture</option>
</select>
</fieldset>
<br>
<div class="subform-test-class">
<fieldset id="#DVD" class="info-block">
<label for="#DVD">Size (MB)</label>
<input type="text" id="#DVD" name="dvdSize">
<p>*Please provide size of the DVD (MB)</p>
</fieldset>
<br>
<fieldset id="#Book" class="info-block">
<label for="#weight" id="book">Weight (KG)</label>
<input type="text" id="#weight" name="bookWeight">
<p>*Please provide weight of the book in KG.</p>
</fieldset>
<br>
<fieldset id="#Furniture" class="info-block">
<label for="#height" id="height">Height</label>
<input type="text" id="#height" name="fHeight">
<label for="#width" id="width">Width</label>
<input type="text" id="#width" name="fWidth">
<label for="#length" id="length">Length</label>
<input type="text" id="#length" name="fLength">
<p>*Please provide size of the furniture in dimensions of HxWxL</p>
</fieldset>
</div>
</form>
Cant figure out how to create JS code for it to work. Had many attempts from youtube videos but nothing
I'm trying to create it dynamic so that when you select something else, the previous fieldset changes to new one and the last selection disappears. Nothing works with my code. I tried traditional JS - same results. I already put the div as display:none in CSS. Maybe my syntax is wrong?
<form>
<fieldset>
<label for="#productType">Type Switcher</label>
<select id="#productType">
<option>--Select a Type</option>
<option value="DVD" id="#DVD" onchange="show(this)">DVD</option>
<option value="Book" id="#Book" onchange="show(this)">Book</option>
<option value="Furniture" id="#Furniture" onchange="show(this)">Furniture</option>
</select>
</fieldset>
<br>
<div class="subform-test-class">
<fieldset id="#DVD" class="info-block">
<label for="#DVD">Size (MB)</label>
<input type="text" id="#DVD" name="dvdSize">
<p>*Please provide size of the DVD (MB)</p>
</fieldset>
<br>
<fieldset id="#Book" class="info-block">
<label for="#weight" id="book">Weight (KG)</label>
<input type="text" id="#weight" name="bookWeight">
<p>*Please provide weight of the book in KG.</p>
</fieldset>
<br>
<fieldset id="#Furniture" class="info-block">
<label for="#height" id="height">Height</label>
<input type="text" id="#height" name="fHeight">
<label for="#width" id="width">Width</label>
<input type="text" id="#width" name="fWidth">
<label for="#length" id="length">Length</label>
<input type="text" id="#length" name="fLength">
<p>*Please provide size of the furniture in dimensions of HxWxL</p>
</fieldset>
</div>
</form>
Cant figure out how to create JS code for it to work. Had many attempts from youtube videos but nothing