Show fields IF select option is selected-CodePudding

I'm trying to make my form somehow more user-friendly. So don't show at the first spot all the fields but only the necessary one, and if a user will meet certain criteria, then show the rest of the fields. It's based on newest bootstrap. My codes are like below:

    (function () {
      'use strict'
    
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation');
      var showHidden = document.querySelectorAll('.d-none');
      var selectGroup = document.getElementById('target-audience');
      
      selectGroup.addEventListener('change', function handleChange(event) {
      if (event.target.value === '8') {
        showHidden.style.display = 'block!important';
      } else {
        showHidden.style.display = 'none';
      }
    });
    
      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
        .forEach(function (form) {
          form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }
    
            form.classList.add('was-validated')
          }, false)
        })
    })()

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
    
    html, body {
      font-family: 'Poppins', sans-serif;
    }
    
    #mailchimp-container h1 {
      font-size:1em;
      text-transform:uppercase;
      font-weight:bold;
    }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div  id="mailchimp-container">
    <div >
    <div >
    <h1 >
    Form test
    </h1>
    
    <form  novalidate>
      <div >
        <label for="email" >Email</label> 
        <input id="email" name="email" type="email"  required>
        <div >
          Looks good!
        </div>
      </div>
      <div >
        <label for="fname" >Name</label> 
        <input id="fname" name="fname" type="text"  required>
        <div >
          Looks good!
        </div>
      </div>
      <div >
        <label for="target-audience" >Who are you?</label> 
        <select id="target-audience" name="target-audience"  required>
            <option disabled selected value="">--</option>
            <option value="8">Fans of cars, motors and bikes</option>
            <option value="16">Fans of flowers</option>
            <option value="24">Fans of food</option>
        </select>
        <div >
          Pick proper option
        </div>
      </div>
      <div >
        <label for="location" >Your location</label> 
        <select id="location" name="location"  required>
            <option disabled selected value="">--</option>
            <option value="europe">Europe</option>
            <option value="anz">ANZ</option>
            <option value="americas">Americas</option>
        </select>
        <div >
          Pick proper option
        </div>
      </div>
      <div >
        <label for="fav-car" >Favourite car brand</label> 
        <input id="fav-car" name="fav-car" type="text" >
      </div>
      <div >
        <label for="fav-bike" >Favourite bike brand</label> 
        <input id="fav-bike" name="fav-bike" type="text" >
      </div>
      <div >
        <label for="fav-motorcycle" >Favourite motorcycle brand</label> 
        <input id="fav-motorcycle" name="fav-motorcycle" type="text" >
      </div> 
      <div >
        <button name="submit" type="submit" >Submit</button>
      </div>
    </form>
    </div>
    </div>
    </div>

While the form is validating properly, unfortunately the javascript that is suppose to show the fields doesn't. In practice when a user will pick value=8 so he will be a fan of cars/bikes/motors, then the fields should appear.

Thank!

CodePudding user response：

showHidden has a 3 nodes. So you need to iterate and for importing implementation you can use setProperty() method like this;

selectGroup.addEventListener('change', function handleChange(event) {
    if (event.target.value === '8') {
        showHidden.forEach(div => div.style.setProperty('display', 'block', 'important'))
    } else {
        showHidden.forEach(div => div.style.setProperty('display', 'none', 'important'))
    }
});

CodePudding user response：

Loop through showHidden since it's a NodeList, then use setAttribute('style', 'display: block!important') since you can't add important to an HTMLElement:

(function() {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation');
  var showHidden = document.querySelectorAll('.d-none');
  var selectGroup = document.getElementById('target-audience');

  selectGroup.addEventListener('change', function(event) {
    if (event.target.value === '8') {
      showHidden.forEach(function(el) {
        el.setAttribute('style', 'display: block!important');
      })
    } else {
      showHidden.forEach(function(el) {
        el.setAttribute('style', 'display: none');
      })
    }
  });

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
html,
body {
  font-family: 'Poppins', sans-serif;
}

#mailchimp-container h1 {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div  id="mailchimp-container">
  <div >
    <div >
      <h1 >
        Form test
      </h1>

      <form  novalidate>
        <div >
          <label for="email" >Email</label>
          <input id="email" name="email" type="email"  required>
          <div >
            Looks good!
          </div>
        </div>
        <div >
          <label for="fname" >Name</label>
          <input id="fname" name="fname" type="text"  required>
          <div >
            Looks good!
          </div>
        </div>
        <div >
          <label for="target-audience" >Who are you?</label>
          <select id="target-audience" name="target-audience"  required>
            <option disabled selected value="">--</option>
            <option value="8">Fans of cars, motors and bikes</option>
            <option value="16">Fans of flowers</option>
            <option value="24">Fans of food</option>
          </select>
          <div >
            Pick proper option
          </div>
        </div>
        <div >
          <label for="location" >Your location</label>
          <select id="location" name="location"  required>
            <option disabled selected value="">--</option>
            <option value="europe">Europe</option>
            <option value="anz">ANZ</option>
            <option value="americas">Americas</option>
          </select>
          <div >
            Pick proper option
          </div>
        </div>
        <div >
          <label for="fav-car" >Favourite car brand</label>
          <input id="fav-car" name="fav-car" type="text" >
        </div>
        <div >
          <label for="fav-bike" >Favourite bike brand</label>
          <input id="fav-bike" name="fav-bike" type="text" >
        </div>
        <div >
          <label for="fav-motorcycle" >Favourite motorcycle brand</label>
          <input id="fav-motorcycle" name="fav-motorcycle" type="text" >
        </div>
        <div >
          <button name="submit" type="submit" >Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>