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

<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
    <li>
<label for="simple-input"> UserName < /label> < input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
 </li>
 <li>
 <label for="simple-input">Password</label>
 <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
        </li>
<li>
<input onclick="myFunction()" id="button" type="submit">
</li> </ul>
</form>

This is my Script tag. I want to follow DRY rules. I have tried saving the values to each separate variables.

    <script>
    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);    
});


</script>

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

<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
    <li>
<label for="simple-input"> UserName < /label> < input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
 </li>
 <li>
 <label for="simple-input">Password</label>
 <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
        </li>
<li>
<input onclick="myFunction()" id="button" type="submit">
</li> </ul>
</form>

This is my Script tag. I want to follow DRY rules. I have tried saving the values to each separate variables.

    <script>
    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);    
});


</script>

• javascript
• html
• dry
• dom-events

• Would be nice to format the source code correctly. – Pingolin Commented Feb 4, 2019 at 8:06
• Thank you @Armel for your feedback, this was the first question I've asked. – Mayur Kandalkar Commented Feb 5, 2019 at 10:05

3 Answers 3

You can get the form elements using document.querySelector('form.form').elements

document.querySelector('form.form').addEventListener('submit', function(e) {
  e.preventDefault();
  let x = document.querySelector('form.form').elements;
  console.log("Username: ", x['userid'].value);
  console.log("Password: ", x['pwd'].value);
});

<form class="form" action="register.jsp" method="post">
  <ul class="fieldlist">
    <li>
      <label for="simple-input"> UserName</label>
      <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;">
    </li>
    <li>
      <label for="simple-input">Password</label>
      <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;">
    </li>
    <li>
      <input id="button" type="submit">
    </li>
  </ul>
</form>

You could use FormData and pass the form element as a parameter. Then use FormData.entries() to get an iterator of all values

document.querySelector('form.form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const entires = formData.entries();

  for (var input of entires) {
    console.log(input[0] + ': ' + input[1]);
  }
});

<form class="form" action="register.jsp" method="post">
  <ul class="fieldlist">
    <li>
      <label for="simple-input"> UserName </label> <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
    </li>
    <li>
      <label for="simple-input">Password</label>
      <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
    </li>
    <li>
      <input id="button" type="submit">
    </li>
  </ul>
</form>

Both your listeners are listening for the same thing - a submit. Make your code much simpler by merging them into a simplified listener, using template literals and newlines for the console.log():

document.querySelector("form.form").submit = function(e) {
    e.preventDefault();
    console.log(`Username: ${nameInput.value}\nPassword: ${nameInput1.value}`);
}