title: How do I output HTML form data using Javascript?
body: <p>I hit a little bit of a wall. With my current JS how do I output the current form field results in the class="household" when the user hits "add"?</p>
  
  <p>*I still want to keep the remove functionality.</p>
  
  <p>I cannot edit HTML only JS. Any help gladly is appreciated. Thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ol class="household"&gt;&lt;/ol&gt;
      &lt;form&gt;
          &lt;div&gt;
              &lt;label&gt;Age
                  &lt;input type="text" name="age"&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Relationship
                  &lt;select name="rel"&gt;
                      &lt;option value=""&gt;---&lt;/option&gt;
                      &lt;option value="self"&gt;Self&lt;/option&gt;
                      &lt;option value="spouse"&gt;Spouse&lt;/option&gt;
                      &lt;option value="child"&gt;Child&lt;/option&gt;
                      &lt;option value="parent"&gt;Parent&lt;/option&gt;
                      &lt;option value="grandparent"&gt;Grandparent&lt;/option&gt;
                      &lt;option value="other"&gt;Other&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Smoker?
                  &lt;input type="checkbox" name="smoker"&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button class="add"&gt;add&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button type="submit"&gt;submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function validate(form) {
  
          fail = validateAge(form.age.value)
          fail += validateRel(form.rel.value)
  
          if (fail == "") return true
          else {
              alert(fail);
              return false
          }
      }
  
      function validateAge(field) {
          if (isNaN(field)) return "No age was entered. \n"
          else if (field &lt; 1 || field &gt; 1000)
              return "Age must be greater than 0. \n"
          return ""
      }
  
      function validateRel(field) {
          if (field == "") return "Please select a relationship \n"
          return ""
  
      }
  
  
      document.querySelector("form").onsubmit = function() {
          return validate(this)
  
      }
  
      document.querySelector(".add").onclick = function() {
          createinput()
      };
  
      count = 0;
      function createinput() {
          field_area = document.querySelector('.household')
          var li = document.createElement("li");
          var input = document.createElement("input");
          input.id = 'field' + count;
          input.name = 'field' + count;
          input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
          li.appendChild(input);
          field_area.appendChild(li);
          //create the removal link
          var removalLink = document.createElement('a');
          removalLink.onclick = function() {
              this.parentNode.parentNode.removeChild(this.parentNode)
          }
          var removalText = document.createTextNode('Remove Field');
          removalLink.appendChild(removalText);
          li.appendChild(removalLink);
          count++
      }
  </code></pre>