Select Element on Survey Form - Build a Survey Form

HTML-CSS
1

I’m struggling to understand why I am receiving notifications that say " You should have a select field with an id of dropdown & Your #dropdown should have at least two selectable (not disabled) option elements. & Your #dropdown should be a descendant of #survey-form."

I have two different select elements with the id of “dropdown” and they are inside a form element that has the id of “survey-form”, and both have multiple options to select. When I test them on the preview, they seem to work.

These are the only things that don’t pass, so I am hopeful to resolve this very soon! haha

<fieldset>
        <legend>Appointment Information</legend>
        <label for=“insurance">Current Insurance Plan:
          <select id=“dropdown" name=“dropdown”>
            <option value="">(select one)</option>
            <option value="1">Blue Cross Blue Shield</option>
            <option value="2">OHP</option>
            <option value="3">Kaiser Permanente</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="insurance-card">Please upload a photo of the front and back of your insurance card: <input id="insurance-card" type="file" name="file" /></label>
        <label for=“appointment-type">What services would you like to schedule?
          <select id=“dropdown” name=“appointment-type”>
            <option value="">(select one)</option>
            <option value="1">Covid-19 Testing</option>
            <option value="2">UTI Testing</option>
            <option value="3">HRT Consultation</option>
            <option value="4">Pregnancy Testing</option>
            <option value="5">STD Testing</option>
            <option value="6">Wellness Exam</option>
          </select>
        </label>.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

What make you error is, in this part I have two different select elements with the id of “dropdown”, try to not break the rule, i mean they ask you to make Inside the form element, you should have a select dropdown element with an id of dropdown and at least two options to choose from. If you want to pass my suggestion is just make one select, 'cause if you make two the system will read two id="dropwdown" that’ll 'cause error.

1 Like
3

Also - I did notice when other people had this issue, the answer seemed to be that they used the same id twice, and ids must be unique, so you can’t have both the label and select using the same id. After reading, I thought for sure the issue was that both of my dropdown menus had the same id, but after fixing that, the code still doesn’t pass. I triple checked, and even used command+F to search for id=“dropdown” and that only brought back the one instance.

What else could cause this to not pass? should I just delete one of my select elements?

4

thank you! i did notice this error as you were replying, but after I changed the second drop down menu, it still had that error. I am confused haha

5

did you upload on github?, can i see it?

6

I try to fixed your code, please try it

<label for="insurance">Current Insurance Plan: </label>
<select id="dropdown" name=“dropdown”>
  <option value="">(select one)</option>
  <option value="Blue Cross Blue Shield">Blue Cross Blue Shield</option>
  <option value="OHP">OHP</option>
  <option value="Kaiser Permanente">Kaiser Permanente</option>
  <option value="Other">Other</option>
</select>
1 Like
7

Thank you! Sorry I don’t have a GitHub account! I will put my code here, and try your solution now! I really appreciate it!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">New Patient Registration Form</h1>
    <p id="description">Thank you for your interest in Waldorf Mountain Medical Centre!</p> <p> Please fill out this short survey in order to schedule an appointment.</p>
    <form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <legend>Personal Information</legend>
        <label id="name-label" for="name">First Name: <input placeholder="Victoria" id="name" name="first-name" type="text" required /></label>
        <label for="last-name">Last Name: <input placeholder="Worden" id="last-name" name="last-name" type="text" required /></label>
        <label id="email-label" for="email">Preferred Email: <input placeholder="Worden.VictoriaNicole@Gmail.com" id="email" name="email" type="email" required /></label>
        <label id="number-label" for="number">Age: <input placeholder="18"  id="number" type="number" name="number" min="18" max="99" /></label>
        <label for="DOB">Date of Birth: <input placeholder="08/15/1983" id="DOB" name="DOB" type="text" required /></label>
        <label  for="new-password">Create a Secure Password: <input placeholder="ABC123" id="new-password" name="new-password" type="password" pattern="[a-z0-9]{8,}" required /><p>(Passwords must be a minimum of 8 characters and use characters A-Z or numerals 0-9)</p></label>
      </fieldset>
<fieldset>
        <legend>Appointment Information</legend>
        <label for=“insurance">Current Insurance Plan:
          <select id=“dropdown" name=“dropdown”>
            <option value="">(select one)</option>
            <option value="1">Blue Cross Blue Shield</option>
            <option value="2">OHP</option>
            <option value="3">Kaiser Permanente</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="insurance-card">Please upload a photo of the front and back of your insurance card: <input id="insurance-card" type="file" name="file" /></label>
        <label for=“appointment-type">What services would you like to schedule?
          <select name=“appointment-type”>
            <option value="">(select one)</option>
            <option value="1">Covid-19 Testing</option>
            <option value="2">UTI Testing</option>
            <option value="3">HRT Consultation</option>
            <option value="4">Pregnancy Testing</option>
            <option value="5">STD Testing</option>
            <option value="6">Wellness Exam</option>
          </select>
        </label>
        <label for="allergies">Please list any allergies you have:
          <textarea id="allergies" name="allergies" rows="3" cols="30" placeholder="List any allergies here."></textarea>
        </label>
        <label for="detail">Please add any details you would like your medical provider to know:
          <textarea id="detail" name="detail" rows="3" cols="30" placeholder="List any concerns or symptoms here."></textarea>
        </label>
</fieldset>
      <fieldset>
        <legend> How did you hear about us? </legend>
        <label for="Newspaper"><input value="Newspaper" id="Newspaper" type="radio" name="Refferal" class="inline" checked /> Newspaper</label>
        <label for="Social-Media"><input value="Social-Media" id="Social-Media" type="radio" name="Refferal" class="inline" /> Social Media</label>
        <label for="Search-Engine"><input value="Search-Engine" id="Search-Engine" type="radio" name="Refferal" class="inline" /> Search Engine (Google, Yahoo, etc)</label>
        <label for="Friend"><input value="Friend" id="Friend" type="radio" name="Refferal" class="inline" /> Referred By Friend</label>
        <label for="TV"><input value="TV" id="TV" type="radio" name="Refferal" class="inline" checked /> TV Advert</label>
      </fieldset>
      </fieldset>
      <p> Please read the <a href="https://www.freecodecamp.org/news/terms-of-service/">Terms & Conditions</a></p>
      <label for="terms-and-conditions">
        <input value="terms-and-conditions" class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the terms and conditions
      </label>
      <label for="email-updates">
        <input value="email-updates" class="inline" id="email-updates" type="checkbox" name="email-updates" /> I agree to receive promotional emails to the above email address
      </label>
      <input id="submit" type="submit" value="Submit" />
    </form>
  </body>
</html>
8

Ok - your suggestion was correct! it is now letting me pass the test. Thank you so much for your help!

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.