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
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 class="question" data-country="France">
<p>Another one question if you live in France</p>
<input type="text" />
</div>
<div class="question" data-town="Paris">
<p>Another one question if you live in Paris</p>
<input type="text" />
</div>
</form>