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

Html – Dropdown menu for survey form that adds new question after selecting yes option – Only CSS

I’m learning html and for a project I’m making a survey form. I want a dropdown menu that when the user selects yes it has new question pop up relating to the subject. How would i do this? I have no knowledge of JavaScript.

Do you own the DLC?

`(select one)
Yes
No

What i want is when someone selects yes other questions will now show relating to the dlc. Will this be possible with only html and css?

Tags:

3

Answers


  1. 0

    No, it won’t be possible without JS, since you have to handle a logic (You have to add an input based on a value, do you see the logic here?). Hence, explore Javascript and it should be fairly straightforward for you to develop. Comment on this thread if you want some help and you are stuck.

    Login or Signup to reply.
  2. 0

    Here you go:

    let DLC = document.getElementById("DLC");
for (let choice of document.querySelectorAll("[name=choice]")) {
    choice.addEventListener("change", function() {
        DLC.classList[((choice.id === "yes") === choice.checked) ? "remove" : "add"]("invisible");
    });
}
    .invisible {
    display: none;
}
    Do you own the DLC? `(select one) 
<label for="yes">Yes</label><input name="choice" type="radio" id="yes">
<label for="no">No</label><input name="choice" type="radio" id="no" checked>
<select id="DLC" class="invisible">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

    Explanation:

    • Javascript
      • we get the elements whose name is choice
      • we loop the result set iterating it with a variable called choice
      • we get the select whose appearance we want to toggle
      • we check whether the id is yes and is checked or is not yes and is unchecked, in which case we remove the invisible class showing it, or adding the invisible class, hiding it
      • we have a change event for both checkboxes
    • CSS
      • we have an invisible class to easily hide elements by adding this class or showing elements by removing it
    • HTML
      • Created a dummy structure for this purpose

    In CSS you can create a next sibling selector rule with pseudo-selectors, but unless you are okay by holding the click button, I advise against it in this case.

    Login or Signup to reply.
  3. 0

    You can do by validating option value selected for the siblings.

    For this HTML structure should have the select dropdown and the questions elements/HTML tags on same level, as in they should be siblings.

    Check below:

    label { display: block; margin: 40px 0 10px; }

#dlc { display: none; }

.dlc:has(option[value="yes"]:checked) ~ #dlc {
  display: block;
}
    <select class="dlc" name="" id="">
  <option value="">Select One</option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>

<div id="dlc">
  <label for="newq">New Question</label>
  <input id="newq" type="text" placeholder="New Answer Here...">
</div>

    Hope this helps, using JUST CSS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search