title: Capture multiple HTML element values using javascript on form submit
body: <p>How do I capture values from HTML elements and send them to be processed via a form?</p>
  
  <p>I am trying to create a list of menu items I have built out the structure of the individual items but, I am confused as to how to capture the values when the form is submitted.</p>
  
  <p>As I type this I just realise that my attempt below is not correct because the items are not associated with the form.</p>
  
  <p>How do I correctly associate the elements with the form and capture the values onSubmit.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const form = document.querySelector('#menu-item-form');
  form.addEventListener('submit', function() {
    console.log(this.querySelector(' * .topping'))
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu-item {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    height: 20rem;
    max-height: auto;
    padding: .5rem;
    margin: 2rem auto;
  }
  
  .menu-item #menu-item-form {
    display: none;
  }
  
  .menu-item .item {
    flex-basis: 50%;
  }
  
  .menu-item .price,
  .menu-item .topping {
    align-self: center;
    margin-top: 2rem;
  }
  
  .menu-item button {
    flex-basis: 20%;
    margin-top: 2rem;
    height: 3.5rem;
    align-self: center;
  }
  
  .menu-item .item img {
    object-fit: cover;
    width: 100%;
    height: 80%;
  }
  
  .menu-item .item p {
    margin: 0;
    font-family: "Blanch";
    font-size: 5rem;
    color: rgb(34, 33, 33);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="menu-item"&gt;
    &lt;form id="menu-item-form"&gt;
    &lt;/form&gt;
    &lt;div class="item"&gt;
      &lt;p class="item-name"&gt;name&lt;/p&gt;      // capture
      &lt;img src="../../assets/img/menu/bbq-chicken pizza.jpg"&gt;
    &lt;/div&gt;
    &lt;span class="topping"&gt;
                  &lt;select name="topping" id=""&gt; // capture
                    &lt;option value=""&gt;Topping&lt;/option&gt;
                    &lt;option value="tomato"&gt;Tomato&lt;/option&gt;
                    &lt;option value="pepperoni"&gt;Pepperoni&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/span&gt;
    &lt;span class="price"&gt;1350.00&lt;/span&gt;    // capture
    &lt;button class="order-btn" form="menu-item-form" type="submit"&gt;Add to Order&lt;/button&gt;   // submit
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>