Switch Case JavaScript Form-CodePudding

I hope this is not a duplicate. I want to build a interactive web-form in this way. After every question or selection the user does the new question appear so till then all question are hidden , beside the first; and my second problem is that I want the second, third.. response to be dependent on which response they have on the previous question. Do you know how can I do that with switch case. I will give here a small example of what i want:

So the only question that appears in form to be Where o you live, and if the user select France, a second dropdown list is created and is asking to select the city of France and only city of France is showed and so on.

<p>Where do you live</p>
<select name="country" id="country" required>
 <option value="UK">UK</option>
 <option value="UK">France</option>
</select>

<p>select the city in the uk</p>
<select name="town1 id="town1" required>
 <option value="London">London</option>
 <option value="Manchester">Manchester</option>
</select

<p>select the city in france</p>
<select name="town2 id="town2" required>
 <option value="Paris">Paris</option>
 <option value="St.Tropez">St.tropez</option>
</select>

Thank you for the help, Alex

CodePudding user response：

try this.
You don't need duplicate select for every country. Just set depencency with data-country.

And for another questions you can make the same. Set data attributes with appropriate values for questions wrappers, and they dynamically shows or hides on form changing.

// This listener makes dependency variants in select
document.getElementById('country').addEventListener('change', function() {
  const selectedCountryValue = this.value;
  document.getElementById('selectedCountry').innerText = this.children[this.selectedIndex].text;
  const town = document.getElementById('town');
  town.querySelectorAll('option').forEach(function(opt, i) {
    opt.style.display = opt.dataset.country == selectedCountryValue ? 'block' : 'none';
    if ((i == town.selectedIndex) && opt.dataset.country != selectedCountryValue) {
      town.querySelectorAll(`option[data-country="${selectedCountryValue}"]`)[0].selected = true
    }
  });
})
document.getElementById('country').dispatchEvent(new Event('change'))

// This listener makes questions showed and required, if another questions answered appropriate answers
document.getElementById('dynamicForm').addEventListener('change', function() {
  const form = this;
  document.querySelectorAll('.question').forEach(function(question) {
    let activeQuestion = true;
    Object.keys(question.dataset).forEach(function(key) {
      activeQuestion &= (question.dataset[key] == form.querySelector(`#${key}`).value);
    })
    question.style.display = (activeQuestion) ? 'block' : 'none'
    question.querySelector('input, select').required = activeQuestion;
  });
})


document.getElementById('dynamicForm').dispatchEvent(new Event('change'))

<form id="dynamicForm">
  <p>Where do you live</p>
  <select name="country" id="country" required>
    <option value="UK">UK</option>
    <option value="France">France</option>
  </select>

  <p>Select the city in the <span id="selectedCountry"></span></p>
  <select name="town" id="town" required>
    <option data-country="UK" value="London">London</option>
    <option data-country="UK" value="Manchester">Manchester</option>
    <option data-country="France" value="Paris">Paris</option>
    <option data-country="France" value="St.Tropez">St.tropez</option>
  </select>

  <div  data-country="France">
    <p>Another one question if you live in France</p>
    <input type="text" />
  </div>

  <div  data-town="Paris">
    <p>Another one question if you live in Paris</p>
    <input type="text" />
  </div>
</form>