How to Console log the Entire HTML Form?

show form data in console on submit
console.log format
how to get value from console log
console.log input value
console log formdata
console log from html
console log element id
console.log in java

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>

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>

Sending form text input to console.log for testing, Writing into the browser console, using console.log() . Using innerHTML. To access an HTML element, JavaScript can use the document.getElementById(id)  The console.log() method writes a message to the console. The console is useful for testing purposes. Tip: When testing this method, be sure to have the console view visible (press F12 to view the console).

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

HTML DOM console.log() Method, 'value1'); formData.append('key2', 'value2'); // Display the values for (var value of formData.values()) { console.log(value); }. The result is: The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Syntax: console.log(A); Parameters: It accepts a parameter which can be an array, an object or any message. Return value: It returns the value of the parameter given.

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>

JavaScript Output, JS Full Form · How to detect HTTP or HTTPS then force redirect to HTTPS in JavaScript ? The console.log() is a function in JavaScript which is used to print any kind of string is passed to the function console.log(), then the function will display it. How to Create Full Screen Overlay Navigation Bar using HTML CSS and  console.log() doesn’t tell you the whole story. You only get the line number where log() is placed but not the whole trace of how it was called, via what function(s). So if you have more than a few calls to the same function, there’s no way you can know what’s going on without adding some explicit messages like “this was called in foo

FormData.values(), serializeArray()Returns: Array. Description: Encode a set of form elements as an array of names and values. This produces the following data structure (​provided that the browser supports console.log ): <!doctype html>. <html lang="​en">. Using console.log() For debugging purposes, you can call the console.log() method in the browser to display data. You will learn more about debugging in a later chapter.

JavaScript, Description: Encode a set of form elements as a string for submission. It can act on a jQuery object that has selected individual form controls, such as <input> , <​textarea> , and <select> console.log( $( this ).serialize() ); <!doctype html>. The log is labeled // with the message string in the log viewer, and the JSON content // is displayed in the expanded log structure under "jsonPayload". var parameters = { isValid: true, content:

.serializeArray(), home Front End HTML CSS JavaScript HTML5 Schema.org php.js Twitter Bootstrap Write a JavaScript function to get the values of First and Last name of the following form. console.log("full name: ", fname, lname); The action attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to a page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:

Comments
  • Would be nice to format the source code correctly.
  • Thank you @Armel for your feedback, this was the first question I've asked.