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

try it the same way described here https://stackoverflow.com/questions/23044329/show-form-data-in-console-on-submit/23044468 — pbachman, Oct 09 '19 at 20:30

score 2 · Accepted Answer · answered Oct 09 '19 at 20:45

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>

@MikeL. Glad to help, happy coding! – k3llydev Oct 09 '19 at 20:58 — k3llydev, Oct 09 '19 at 20:58

How to show the data from my form in console?

1 Answers1