Showing and Hiding a div with a select in vanilla javascript

user_3311823 0
Viewed 168

I am trying to show input elements in a form with HTML select options. There are three options (DVD, book, and furniture) and each option has its product description input field (such as weight, height, size (MB) and length).

These inputs should be hidden and only show when the select option is changed. I want to use a for loop and not if or else conditionals.

The hidden input fields do not hide and show as expected using the select button. I am still learning, any tips will be helpful.

var display = {
  1: [],
  2: ["book"],
  3: ["dvd"],
  4: ["Furniture"],

}

function selectChanged() {
  var sel = document.getElementById("productType");
  for (var i = 1; i < 4; i++) {
    document.getElementById("product" + i).classList.add("hidden");
  }
  display[sel.value].forEach(function(i) {
    document.getElementById("product" + i).classList.remove("hidden");
  });
}
 <style>
.product{
    border: 1px solid #333;
    padding: 5px;
    width: 20%;
    margin: 25px 20px;
}
.info{
    text-align: center;
    
}
.bottom-line{
    box-sizing: border-box;
    border-top: 1px solid;
    margin: 0 34px;
}

form{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.input-form{
    width: 100%;

}
.data-input input{
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
 
.switcher{
    width: 25%;
    margin: 25px;
    display: inline-block;
    display: flex;
    justify-content: center;

}
.input-group{
    margin: 20px;
    display: flex;
    justify-content: center;
    
}
.same-line{
    margin: 0;
    width: 25%;
}
.furniture{
    width: 50%; 
    display: none;
}
.furniture input{
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.describe{
    margin-top: 25px;
}

.hidden{
    display: none;
}



</style>

<section class="add_products">
  <form class="input-form" action="" id="product_form">
    <div class="data-input">
      <label for="sku">SKU#:</label>
      <input type="text" id="sku" name="sku">
    </div>

    <div class="data-input">
      <label for="name">NAME:</label>
      <input type="text" id="name" name="name">
    </div>

    <div class="data-input">
      <label for="price">PRICE ($):</label>
      <input type="number" id="price" name="price">
    </div>

    <div class="input-group switcher">
      <label for="productType">Type Switcher:</label>
      <select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
        <option value="1">DVD</option>
        <option value="2">Book</option>
        <option value="3">furniture</option>
      </select>
    </div>

    <div class="data-input product hidden">
      <label for="size">Size (MB):</label>
      <input type="number" class="hidden" id="size" name="price">
      <p class="describe">Please provide size in (MB)</p>
    </div>

    <div class="furniture product hidden">
      <label for="height">Height (CM):</label>
      <input type="number" id="height" name="price">
    </div>
    <div class="furniture product hidden">
      <label for="width">Width (CM):</label>
      <input type="number" id="width" name="price">
    </div>

    <div class="furniture product hidden">
      <label for="length">Length (CM):</label>
      <input type="number" id="length" name="price">
      <p class="describe">Please provide measurements in (CM)</p>
    </div>

    <div class="data-input product hidden">
      <label for="weight">Weight (KG):</label>
      <input type="number" id="weight" name="price">
      <p class="describe">Please provide weight in KG</p>
    </div>

css html javascript
1 Answers

My approach:

  • Put the input fields into their own divs
  • Give them ids that correspond to the selection options.
  • Use Javascript to check the selected value that you declared against the current display value of those ids and make the switch as necessary.

It's a bit different from what you were using but it works. Let me know what you think.

function selectChanged() {
  var sel = document.getElementById("productType");
  let dvd = document.getElementById("dvd");
  let book = document.getElementById("book");
  let furniture = document.getElementById("furniture");
  for (var i = 1; i < 4; i++) {
    dvd.style.display = sel.value == "1" ? "block" : "none";
    book.style.display = sel.value == "2" ? "block" : "none";
    furniture.style.display = sel.value == "3" ? "block" : "none";
  }
}
.product {
  border: 1px solid #333;
  padding: 5px;
  width: 20%;
  margin: 25px 20px;
}

.info {
  text-align: center;
}

.bottom-line {
  box-sizing: border-box;
  border-top: 1px solid;
  margin: 0 34px;
}

form {
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.input-form {
  width: 100%;
}

.data-input input {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.switcher {
  width: 25%;
  margin: 25px;
  display: inline-block;
  display: flex;
  justify-content: center;
}

.input-group {
  margin: 20px;
  display: flex;
  justify-content: center;
}

.same-line {
  margin: 0;
  width: 25%;
}

.furniture {
  width: 50%;
  display: block;
}

.furniture input {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.describe {
  margin-top: 25px;
}

#dvd {
  display: none;
}

#book {
  display: none;
}

#furniture {
  display: none;
}
<section class="add_products">
  <form class="input-form" action="" id="product_form">
    <div class="data-input">
      <label for="sku">SKU#:</label>
      <input type="text" id="sku" name="sku">
    </div>

    <div class="data-input">
      <label for="name">NAME:</label>
      <input type="text" id="name" name="name">
    </div>

    <div class="data-input">
      <label for="price">PRICE ($):</label>
      <input type="number" id="price" name="price">
    </div>

    <div class="input-group switcher">
      <label for="productType">Type Switcher:</label>
      <select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
        <option value="">Please Select</option>
        <option value="1">DVD</option>
        <option value="2">Book</option>
        <option value="3">Furniture</option>
      </select>
    </div>

    <div id="dvd">
      <div class="data-input product">
        <label for="size">Size (MB):</label>
        <input type="number" id="size" name="price">
        <p class="describe">Please provide size in (MB)</p>
      </div>
    </div>

    <div id="book">
      <div class="furniture product">
        <label for="height">Height (CM):</label>
        <input type="number" id="height" name="price">
      </div>
      <div class="furniture product">
        <label for="width">Width (CM):</label>
        <input type="number" id="width" name="price">
      </div>
    </div>

    <div id="furniture">
      <div class="furniture product">
        <label for="length">Length (CM):</label>
        <input type="number" id="length" name="price">
        <p class="describe">Please provide measurements in (CM)</p>
      </div>
      <div class="data-input product">
        <label for="weight">Weight (KG):</label>
        <input type="number" id="weight" name="price">
        <p class="describe">Please provide weight in KG</p>
      </div>
    </div>
  </form>
</section>

user_85650100
Related