Question 44465 in Html Question posted in
Some basic documentation can be found here.

Hide unselected form field in dropdown list in javascript – Html

I have a field with a drop down list in my html form. It contains two possibilities, I would like to make the following field (first block or second block) appear or disappear depending on the selection, I found for radio buttons but not for a drop-down list… Can you help me do this in javascript?

Thanks a lot.

Code html :

<div class="col-md-2">
        <select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
          <option value="midi" data-id="#midi">Midi</option>
          <option value="soir" data-id="#soir">Soir</option>
        </select>
      </div>

// First block
<p class="text-secondary text-center mt-5">Heure midi</p>
      <div class="col-md-4">
        <select class="form-select text-secondary" id="midi" name="heure_midi">
          <option value=""></option>
          <option value=" 12:00">12:00</option>
          <option value="12:15">12:15</option>
          <option value="12:30">12:30</option>
          <option value="12:45">12:45</option>
          <option value="13:00">13:00</option>
          <option value="13:15">13:15</option>
          <option value="13:30">13:30</option>
          <option value="13:45">13:45</option>
          <option value="14:00">14:00</option>
        </select>
      </div>

//Second block         
<p class="text-secondary text-center mt-4">Heure soir</p>
      <div class="col-md-4">
        <select class="form-select text-secondary" id="soir" name="heure_soir">
          <option value=""></option>
          <option value="19:00">19:00</option>
          <option value="19:15">19:15</option>
          <option value="19:30">19:30</option>
          <option value="19:45">19:45</option>
          <option value="19:00">20:00</option>
          <option value="20:15">20:15</option>
          <option value="20:30">20:30</option>
          <option value="20:45">20:45</option>
          <option value="21:00">21:00</option>
        </select>
      </div>
Tags:

2

Answers


  1. 0

    You can combine document.querySelectorAll and classList.toggle triggered with the onchange event of the select to achieve this, with a predefined .hidden class.

    Please see snippet exemple.

    function handleChange(event){
  document.querySelectorAll('.container').forEach((form)=>{
    form.classList.toggle('hidden');
    
  })
}
    .hidden {
  display: none;
}
    <h1 id="header"></h1>
      <div class="col-md-2">
        <select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service" onchange="handleChange(this)">
          <option value="midi" data-id="#midi">Midi</option>
          <option value="soir" data-id="#soir">Soir</option>
        </select>
      </div>


<div class="text-secondary text-center mt-5 container">
      <p class="col-md-4">
      <span>Heure midi</span>
        <select class="form-select text-secondary" id="midi" name="heure_midi">
          <option value=""></option>
          <option value="12:00">12:00</option>
          <option value="12:15">12:15</option>
          <option value="12:30">12:30</option>
          <option value="12:45">12:45</option>
          <option value="13:00">13:00</option>
          <option value="13:15">13:15</option>
          <option value="13:30">13:30</option>
          <option value="13:45">13:45</option>
          <option value="14:00">14:00</option>
        </select>
      </p>
</div>
        
<div class="text-secondary text-center mt-4 container hidden">
      <p class="col-md-4">
       <span>Heure soir</span>
        <select class="form-select text-secondary" id="soir" name="heure_soir">
          <option value=""></option>
          <option value="19:00">19:00</option>
          <option value="19:15">19:15</option>
          <option value="19:30">19:30</option>
          <option value="19:45">19:45</option>
          <option value="19:00">20:00</option>
          <option value="20:15">20:15</option>
          <option value="20:30">20:30</option>
          <option value="20:45">20:45</option>
          <option value="21:00">21:00</option>
        </select>
      </p>
    </div>
    Login or Signup to reply.
  2. 0

    sorry but I’m desperate to see such complicated code to handle a form

    const
  frmX = document.forms['form-name'] 
, tranchesHoraires =
    { midi : [ '12:00','12:15','12:30','12:45','13:00','13:15','13:30','13:45','14:00' ]
    , soir : [ '19:00','19:15','19:30','19:45','19:00','20:15','20:30','20:45','21:00' ]
    };
setHoraires();  // init
frmX.service.onchange = setHoraires;
frmX.onreset          = setHoraires;

function setHoraires()
  {
  frmX.horaire.length = 1;
  frmX.horaire.selectedIndex = 0;
  tranchesHoraires[frmX.service.value].forEach( heure => frmX.horaire.add(new Option(heure,heure)) );
  }
frmX.onsubmit = e =>
  {
  e.preventDefault(); // disable submit for testing.
  console.log( 'result -> ', JSON.stringify( Object.fromEntries( new FormData( frmX ))));
  setTimeout( console.clear, 3000)
  }
    div {
  display : inline-block;
  margin  : 1rem;
  }
    <form name="form-name"> <!-- use a form element -->
  <div >
    <select name="service">
      <option value="midi" selected>Midi</option>
      <option value="soir" >Soir</option>
    </select>
  </div>
  <div >
    <select name="horaire" required >  <!-- use names, ID is not  needed -->
      <option value="" selected disabled> ...choisissez un horaire :</option>
    </select>
  </div>

  <br> <br>
  <button type="submit">submit</button>
  <button type="reset">Reset</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search