How to show the data from my form in console?

Question

I have a form with a couple of inputs. I want to show the value of the inputs (including the names of the fields) in console in json format when I click the submit button.

How can I do this? I read about new FormData way, but I don't really understand how to use it (so far I've come up with this code, but it doesn't work)

//popup is my form

popup.addEventListener("submit", function (event) {
	let formData = new FormData(popup);
	console.log(formData);
  event.preventDefault();
}, false);

Answer 1

If you want to get all of your data in your form (including names), and you ain't planning to use jQuery, you can try to handle the inputs by yourself based on the form:

const form = document.myForm;

form.addEventListener("submit", function(event) {
  event.preventDefault(); // Always preventDefault() first
  let formData = new FormData(this);
  let object = {};
  formData.forEach((value, key) => {
    object[key] = value
  });
  let json = JSON.stringify(object);
  console.log(json);
}, false);

<form name="myForm">
  <input name="input1">
  <input name="input2">
  <input name="input3">
  <button>Submit</button>
</form>