title: How to Console log the Entire HTML Form?
body: <p>I'm trying to console log the entire form but the JavaScript Code is getting too long. Can anyone please help me how to follow DRY(Do not repeat Yourself), coz I have repeated a lot of code in my script tag</p>
  
  <pre><code>&lt;form class="form" action="register.jsp" method="post"&gt;
  &lt;ul class="fieldlist"&gt;
      &lt;li&gt;
  &lt;label for="simple-input"&gt; UserName &lt; /label&gt; &lt; input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" /&gt;
   &lt;/li&gt;
   &lt;li&gt;
   &lt;label for="simple-input"&gt;Password&lt;/label&gt;
   &lt;input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" /&gt;
          &lt;/li&gt;
  &lt;li&gt;
  &lt;input onclick="myFunction()" id="button" type="submit"&gt;
  &lt;/li&gt; &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is my Script tag. I want to follow DRY rules. I have tried saving the values to each separate variables. </p>
  
  <pre><code>    &lt;script&gt;
      var nameInput = document.getElementById('simple-input1');
  
  document.querySelector('form.form').addEventListener('submit', function(e) {
  
      //prevent the normal submission of the form
      e.preventDefault();
  
      console.log("Username: " + nameInput.value);
  });
  
   var nameInput1 = document.getElementById('simple-input2');
  
    document.querySelector('form.form').addEventListener('submit', function (e) {
  
  //prevent the normal submission of the form
  e.preventDefault();
  
  console.log("Password: " + nameInput1.value);    
  });
  
  
  &lt;/script&gt;
  </code></pre>