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

M

mrguyhawkes

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
 
BigDady

BigDady

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>
 
Padonak

Padonak

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>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
[ 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>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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

Similar Threads

I want to Display Excel As HTML In js 2
I dont get this. Please help me!! 2
Check forms With JavaScript 1
How can I remove the specific error message after regex validation is done? 1
Set value after clicking in field 11
Multi select options in a menu 1
Help with popup display 1
Using JS to verify registration info? 1

Members online

No members online now.
Total: 27 (members: 1, guests: 26)
Robots: 528

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,056
Latest member
GlycogenSupporthealth

Latest Threads

Top