How to display input options only after selecting an option from the 'select class' tag JS?

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
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
You can only have ONE ID. you just loved to have the same ID for everything. I also removed the hash mark in your IDs ( hard to apply a style to something like that. I also put everything in small letters. Also added some css to hide things.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forum Information</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
    #dvd, #book, #furniture{
        display: none;
    }
</style>
</head>

<body>
<form>
    <fieldset>
        <label for="#productType">Type Switcher</label>
        <select id="#productType" onchange="show(this.value)">
            <option>--Select a Type</option>
            <option value="dvd" >DVD</option>
            <option value="book" >Book</option>
            <option value="furniture">Furniture</option>
        </select>
    </fieldset>

    <div class="subform-test-class">
        <fieldset id="dvd" class="info-block">
            <label for="dvd">Size (MB)</label>
            <input type="text" name="dvdSize">
            <p>*Please provide size of the DVD (MB)</p>
        </fieldset>

        <fieldset id="book" class="info-block">
            <label for="weight">Weight (KG)</label>
            <input type="text" id="weight" name="bookWeight">
            <p>*Please provide weight of the book in KG.</p>
        </fieldset>

        <fieldset id="furniture" class="info-block">
            <label for="height">Height</label>
            <input type="text" id="height" name="fHeight">

            <label for="width">Width</label>
            <input type="text" id="width" name="fWidth">

            <label for="length">Length</label>
            <input type="text" id="length" name="fLength">
            <p>*Please provide size of the furniture in dimensions of HxWxL</p>
        </fieldset><P id="demo"></P>
    </div>
</form>
<script>
function show(item) {
    document.getElementById("dvd").style.display = "none";
    document.getElementById("book").style.display = "none";
    document.getElementById("furniture").style.display = "none";

    if(item === "dvd"){
    document.getElementById("dvd").style.display = "block";
    }else if(item === "book"){
        document.getElementById("book").style.display = "block";
    }else if(item === "furniture"){
        document.getElementById("furniture").style.display = "block";
    }
}
</script>
</body>
</html>
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    body{
    padding: 5px 5px;
    }
    
    hr{
    height: 2px;
    width: 100%;
    background-color: #ddd;
    }
    
    h1{
    text-align: left;
    padding-left: 20px;
    width: 70%;
    display: inline-block;
    }
    
    button{
    min-width: 70px;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    }
    
    label{
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    min-width: 150px;
    margin-top: 10px;
    margin-left: 10px;
    }
    
    #details h2{
    color: crimson;
    padding-left: 50px;
    }
    
    #details h3{
    color: #045;
    font-style: italic;
    }
    
    .btns{
    width: 25%;
    text-align: right;
    display: inline-block;
    }
    </style>
  </head>
  <body>   
<form id="product_form">
<h1>Product Add</h1>
<div class="btns"><button>Save</button><button>Cancel</button></div>
<hr>
<label for="sku">SKU</label><input type="text" id="sku">
<br>
<label for="name">Name</label><input type="text" id="name">
<br>
<label for="price">Price($)</label><input type="text" id="price">
<br>
<label for="productType">Type Switcher</label>
<select id="productType">
<option value="">--Type Switcher</option>
<option id="DVD" value="">DVD</option>
<option id="Furniture" value="">Furniture</option>
<option id="Book" value="">Book</option>
</select>
<div id="details"></div>
<hr>
</form>
<script>
const products = [
         {
            'option': 'DVD',
            'header': '<h2>DVD</h2>',
            'elems' : '<label for="size">Size(MB)</label><input id="size" name="size">',
            'descr' : '<h3>*Please provide size of the DVD (MB)</h3>'
         },
         {
            'option': 'Furniture',
            'header': '<h2>Furniture</h2>',
            'elems' : `<label for="height">Height(cm)</label><input id="height">
                       <br>
                       <label for="width">Width(cm)</label><input id="width">
                       <br>
                       <label for="length">Length(cm)</label><input id="length">`,
            'descr' : '<h3>*Please provide size of the furniture in dimensions of HxWxL</h3>'
         },
         {
            'option': 'Book',
            'header': '<h2>Book</h2>',
            'elems' : '<label for="weight">Weight(kg)</label><input id="weight">',
            'descr' : '<h3>*Please provide weight of the book in KG</h3>'
         }
                 ];
document.querySelector('#productType').addEventListener('change', function(){
   const ind = this.options[this.selectedIndex].id ?? '';
   let content = '';
   if(ind){
   const o = products.filter( n => n.option == ind )[0];
   content = o.header + o.elems + o.descr;
   }
   document.querySelector('#details').innerHTML = content;
   document.querySelector('#details input')?.focus();
});
</script>
  </body>
</html>
 
Joined
Jul 4, 2023
Messages
478
Reaction score
60
[ on-line ]

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      :root {
        --display: none;
      }
      #dvd, #book, #furniture {
        display: var(--display, none);
      }
      fieldset:has(#productType) {
        margin-bottom: 1rem;
      }
      fieldset + fieldset {
        margin-top: .5em;
      }
      fieldset input {
        display: block;
      }
    </style>
  </head>
  <body>

    <form>
      <fieldset>
        <label for="productType">Type Switcher</label>
        <select id="productType">
          <option>--Select a Type</option>
          <option value="dvd">DVD</option>
          <option value="book">Book</option>
          <option value="furniture">Furniture</option>
        </select>
      </fieldset>

      <div class="subform-test-class">
        <fieldset id="dvd" class="info-block">
          <label for="dvdSize">Size (MB)</label>
          <input type="text" id="dvdSize" name="dvdSize">
          <p>*Please provide size of the DVD in MB</p>
        </fieldset>

        <fieldset id="book" class="info-block">
          <label for="bookWeight">Weight (KG)</label>
          <input type="text" id="bookWeight" name="bookWeight">
          <p>*Please provide weight of the book in kg.</p>
        </fieldset>

        <fieldset id="furniture" class="info-block">
          <label for="furnitureHeight">Height</label>
          <input type="text" id="furnitureHeight" name="furnitureHeight">

          <label for="furnitureWidth">Width</label>
          <input type="text" id="furnitureWidth" name="furnitureWidth">

          <label for="furnitureLength">Length</label>
          <input type="text" id="furnitureLength" name="furnitureLength">
          <p>*Please provide size of the furniture in millimeters</p>
        </fieldset>
      </div>
    </form>

    <script>
      window.onload = load;

      function load() {
        const select = document.querySelector('select#productType');
        select.onchange = function() {
          try { document.querySelector('[style^="--display:"]').style = ''; } catch {;}
          document.querySelector(`#${this.value}`).style = '--display: block';
          document.querySelector(`#${this.value} input`)?.focus();
        }
      }
    </script>
  </body>
</html>
 
Joined
Jul 4, 2023
Messages
478
Reaction score
60
Any way ;)

JavaScript:
console.log(document.querySelector('#productType'));  // null
console.log(document.querySelector('##productType')); // fail
console.log(document.getElementById('#productType')); // pass
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,985
Messages
2,570,202
Members
46,777
Latest member
JosefinaAc

Latest Threads

Top