Survey/Button HELP!

Code Feedback
1

Hi all! I’m trying to finish the Survey project and seem to not be able to figure out the button code. I’ve changed this code I can’t tell you how many times over the last 2 days and I just can’t seem to figure it out . I’ve poured upon dozens of online examples and just can’t seem to get it. Can someone please help me and point out where I went wrong and how to fix it? It may be something big or something trivial, I just can’t seem to find the error.

Here is my error code:
16. Inside the form element, I am presented with a button with id=“submit” to submit all my inputs.

There should be a button with id=“submit” : expected null to not equal null AssertionError: There should be a button with id=“submit” : expected null to not equal null

This is my html thus far…I have not included the css.

<!DOCTYPE html>

<div class="container">
  <header>
    <h1 id="title">It's All About The Pizza !!</h1>
    <p id="description">We want to know all your feels about pizza!</p>
  </header>

  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" name="name" id="name" class="form-control" placeholder="Type your name" required />
    </div>
 

  <div class="form-group">
    <label id="email-label" for="email">Email</label>
    <input type="email" name="email" id="email" class="form-control" placeholder="Enter email" required />
  </div>

  <div class="form-group">
    <label id="number-label" for="number">Age<span class="hint"> (optional)</span></label>
    <input type="number" name="age" id="number" min="8" max="110" class="form-control" placeholder="Age" />
  </div>

  <div class="form-group">
    <p>Which best describes you?</p>
    <select id="dropdown" name="frequency" class="form-control" required>
      <option disabled selected value>How often do you eat pizza?</option>
      <option value="rarely">Rarely</option>
      <option value="rometimes">Sometimes</option>
      <option value="rften">Often</option>
      <option value="all-the-time!!">All the time!!</option>
    </select>
  </div>

  <div class="form-group">
    <p>Have you ever made your own pizza?</p>
    <label>
      <input name="made" value="yes" type="radio" class="input-radio" checked />Yes</label>

    <label>
      <input name="made" value="no" type="radio" class="input-radio" />No</label>

    <label>
      <input name="made" value="maybe-didn't-work-out-so-well" type="radio" class="input-radio" />Maybe, didn't work out so well</label>
  </div>

  <div class="form-group">
    <p>What's your favorite? <i>Check all that apply</i><span class="hint"></span></p>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="plain" />Plain</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="extra-cheese" />Extra Cheese</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="peppernoi" />Pepperoni</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="sausage" />Sausage</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="pepperoni" />Pepperoni</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="veggie" />Veggie</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="bacon" />Bacon</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="anchovy" />Anchovy</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="meat-lovers" />Meat Lovers</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="veggie-lovers" />Veggie Lovers</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="pineapple" />Pineapple</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="penne-vodka" />Penne Vodka</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="olive" />Olive</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="onion" />Onion</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="pan" />Pan</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="thin-crust" />Thin Crust</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="sicillian" />Sicillian</label>

    <label>
      <input name="favorite" type="checkbox" class="input-checkbox" value="chicago-deep-dish" />Chicago Deep Dish</label>

  </div>

  <div class="form-group"></div>
  <p>Tell us about your most amazing (or worst) moment with pizza!</p>
  <textarea id="comments" class="input-textarea" name="comment" placeholder="Tell us your story!"></textarea>
</div>
 
  <div>
  <form id="submit" input type="submit" value="submit">
</form> 
  
  </div>
2

Hello Christina,

Can you please provide a link to your project (codepen link)? That way, it will be easier for others to examine the problem

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

4

However, in your code, you have " <form id="submit" input type="submit" value="submit">"

When you should have a .

You should have something like this <button id = "submit"> Submit </button>

It was saying “null” because the submit button does not in fact exist (in other words, it is null).

5

Sorry for posting incorrectly! I’m still getting the hang of all of this and it’s a bit confusing. Below is the link for the forked pen I saved. Hopefully it works. Apologies again!!

https://codepen.io/christina_leigh/pen/bGwmaMd

6

Christina-

I see two problems in your pen.

  1. You need a <button id = "submit"> Submit </button>

Secondly, the button needs to be INSIDE the form tag whose id is “survey-form”

In your pen, you made another <form> and then included the button inside that.

Please let me know if that fixed your problem. I tested your HTML code and tried making changes to see if that changed anything, and all the tests passed.

7

I got it!! I see where I went wrong after thinking over that other form you mentioned. Thank you sooo much!

8

I am glad you got it! You are welcome. Happy New Year!

9

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