title: Materialize-stepper form not submitting to MySql database, with nodejs
body: <p>I have a large html form, So I decided to use materialize-stepper in order to facilitate the UI. But the form doesn;t submit to the MySql db. I have tried using the normal form with few inputs and it submits to the db. I am thinking, Is it because of the 'ul' markup? my code is below</p>
  
  <p>the snippet of the Html form: </p>
  
  <pre><code>    &lt;form class="CreateClient"&gt;
        &lt;ul class="stepper horizontal" style="min-height:550px"&gt;
           &lt;li class="step active"&gt;
             &lt;div class="step-title waves-effect waves-dark"&gt;Contact detail&lt;/div&gt;
                &lt;div class="step-content"&gt;
                   &lt;div class="row"&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="fa fa-user prefix"&gt;&lt;/i&gt;
                     &lt;input id="icon_prefix" type="text" class="first_name validate" required&gt;
                     &lt;label for="icon_prefix"&gt;First Name&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="fa fa-user prefix"&gt;&lt;/i&gt;
                     &lt;input id="icon_prefix" type="text" class="surname validate" required&gt;
                     &lt;label for="icon_prefix"&gt;Surname&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="material-icons prefix"&gt;place&lt;/i&gt;
                     &lt;input id="icon_place" type="text" class="address validate" required&gt;
                     &lt;label for="icon_place"&gt;Address&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="material-icons prefix"&gt;local_post_office&lt;/i&gt;
                     &lt;input id="icon_post" type="number" class="post_code validate" required&gt;
                     &lt;label for="icon_post"&gt;Postcode&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="material-icons prefix"&gt;phone&lt;/i&gt;
                     &lt;input id="icon_telephone" type="tel" class="telephone validate"&gt;
                     &lt;label for="icon_telephone"&gt;Daytime Telephone&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="material-icons prefix"&gt;phone_iphone&lt;/i&gt;
                     &lt;input id="icon_telephone" type="tel" class="mobile validate"&gt;
                     &lt;label for="icon_phone_iphone"&gt;Mobile&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="input-field col s12"&gt;
                     &lt;i class="material-icons prefix"&gt;email&lt;/i&gt;
                     &lt;input id="icon_email" type="email" class="email validate"&gt;
                     &lt;label for="icon_email"&gt;email&lt;/label&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
                   &lt;div class="step-actions"&gt;
                     &lt;button class="waves-effect waves-dark btn" type="submit"&gt;Submit
                     &lt;i class="material-icons right"&gt;send&lt;/i&gt;
                     &lt;/button&gt;
  </code></pre>
  
  <p>And this is the node app referencing the classes</p>
  
  <pre><code>    const CreateClient = document.querySelector('.CreateClient')
      CreateClient.addEventListener('submit', (e) =&gt; {e.preventDefault()
      const firstName = CreateClient.querySelector('.first_name').value
      const surname = CreateClient.querySelector('.surname').value
      const address = CreateClient.querySelector('.address').value
      const postCode = CreateClient.querySelector('.post_code').value
      const telephone = CreateClient.querySelector('.telephone').value
      const mobilePhone = CreateClient.querySelector('.mobile').value
      const email = CreateClient.querySelector('.email').value
  </code></pre>
  
  <p>Are these codes well written, are they selecting the classes?, if not is the problem with the plugin I used. I'm pretty new to all these. Please Help me</p>