Survey form-Problem

Code Feedback
1

With the survey form I am trying to show divs through the use of checkboxes. I have no problem if I treat each box separately but if I try to use a single function for it, it does not work.
Here is a link to my project:https://codepen.io/jameslwor/pen/qwEOyr?editors=1010.
I know the layout is very very bad but I first want to work on the functionality of the page before working on the layout.

2

I don’t know if I really understand what you mean. Let me explain you want to display elements according to the selected checkbox right ? If it’s I think the first thing that you have to use is not checkbox it’s radio button cause you can select more than one type of checkbox but for radio you just cant select one at the same time.

3

I have multiple lists and want to show as many lists as checkboxes are checked

4

Hi @jameslw, codepen provides validators for HTML, CSS and JS. Click on the arrow in the upper right in each section and then click on the ‘Analyze’ link. You have some spelling errors in HTML that effect your form.

5

At the moment I am only in need of help regarding the question I asked at the start of this post

6

I get the following when I do as you suggest:

  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • The BEM element ‘Action-Adventure’ must be a descendent of ‘Action’.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The BEM element ‘Role-playing’ must be a descendent of ‘Role’.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • ‘<’ is not a valid attribute of the <input> element.
  • ‘li’ is not a valid attribute of the <input> element.
  • The <lable> element is not a valid HTML element.
  • The <lable> element is not a valid HTML element.
7

Spell Check: lable => label

You forgot to close input tag some places.

CSS “id selector” is specifically used for identifying the element uniquely. For selecting any element more than once try to use the “class selector”.

Check: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

8

Thanks for the feedback.
But none of this answers what I asked for help with.
Here is link to the one I am currently working on:https://codepen.io/jameslwor/pen/dLYmWP

9

thank you to everyone who tried to answer the question

10

@jameslw

Try this:

  1. You can use a button to toggle the divs open and close. It would be way easier.
  2. Since you are using Jquery you can just use the toggle function to show and hide the div.
$('#action-button').on('click', () => {
    $('.show').slideToggle(500);
});
  1. Add display: block to the input elements to quickly format the page better like this:
input[type=" email"],
input[type="text"],
input[type="password"] {
  display: block;
  margin-bottom: 1rem;
}