表单提交后控制台未打印表单数据，代码是否存在问题？

你的代码无法打印表单数据的核心原因是所有<input>元素都缺少name属性。FormData对象只会收集带有name属性的表单控件的值，没有name的输入项不会被纳入FormData中，最终导致生成的JSON对象为空，控制台自然看不到有效数据。

修正步骤 #

给每个<input>标签添加对应的name属性，建议属性值与id保持一致（语义化且便于维护）：

修正后的HTML代码 #

<form name="event_form" id="event_form">
  <label for="event_summary">Event Summary:</label>
  <br>
  <input id="event_summary" name="event_summary" type="text">
  <br>
  <br>
  <label for="event_location">Event Location:</label>
  <br>
  <input id="event_location" name="event_location" type="text">
  <br>
  <br>
  <label for="event_description">Event Description:</label>
  <br>
  <input id="event_description" name="event_description" type="text">
  <br>
  <br>
  <label for="start_time">Start Time:</label>
  <br>
  <input id="start_time" name="start_time" type="datetime-local">
  <br>
  <br>
  <label for="end_time">End Time:</label>
  <br>
  <input id="end_time" name="end_time" type="datetime-local">
  <br>
  <br>
  <button type="submit">Submit</button>
</form>

你的JS代码无需修改 #

// get form element
const formElement = document.querySelector('form#event_form')

// convert the form to JSON
const getFormJSON = (form) => {
  const data = new FormData(form);
  return Array.from(data.keys()).reduce((result, key) => {
    result[key] = data.get(key);
    return result;
  }, {});
};


// handle the form submission event, prevent default form behaviour, check validity, convert form to JSON
const handler = (event) => {
  event.preventDefault();
  const valid = formElement.reportValidity();
  if (valid) {
    const result = getFormJSON(formElement);
    console.log(result)
  }
}

formElement.addEventListener("submit", handler)

修正后，填写表单并提交，控制台就能正常打印包含所有输入值的JSON对象了。

内容的提问来源于stack exchange，提问作者displayName is undefined