javascript - 为什么我无法在此提交监听器中获取带有输入值的表单数据对象？

Question

我有一个 HTML 表单，这是一个非常简单的表单，只需要 4 个值。看起来像这样。

$form.addEventListener('submit', (event) => {
  event.preventDefault()

  const formData = new FormData(event.target)
  // log our form object
  console.log(formData)
  event.target.reset()
})

<form id="heatmap-form">
  <div class="form-row text-center">
    <div class="form-group col">
      <label for="parameter">Parameter</label>
      <span class="asterisk_input"></span>
      <select name="parameter" id="parameter" class="custom-select">
        <option selected>Select a parameter</option>
        <option value="air_temperature">Air humidity</option>
        <option value="air_pressure">Air temperature</option>
        <option value="air_humidity">Air pressure</option>
      </select>
    </div>
    <div class="form-group col">
      <label for="unit">Unit</label>
      <span class="asterisk_input"></span>
      <input name="unit" type="text" class="form-control" id="unit" placeholder="C, F, %, hPa etc" required>

    </div>
    <div class="form-group col">
      <label for="height">Height</label>
      <span class="asterisk_input"></span>
      <input name="height" type="text" class="form-control" id="height" placeholder="In CM format" required>
    </div>
    <div class="form-group col">
      <label for="startTime">Start time</label>
      <span class="asterisk_input"></span>
      <input name="startTime" type="datetime-local" class="form-control" id="startTime" placeholder="time" required>
    </div>
  </div>
  <button id="optional-button" type="button" class="text-center my-4 btn btn-large btn-secondary">Show optional parameters</button>
  <div id="optional-form" class="hidden form-row text-center optional-form">
    <div class="form-group col-md-2">
      <label for="endTime">End Time</label>
      <input name="endTime" type="datetime-local" class="form-control" id="endTime">
    </div>
    <div class="form-group col-md-2">
      <label for="maxValue">Max value</label>
      <input name="maxValue" type="text" value=0 class="form-control" id="maxValue">
    </div>
    <div class="form-group col-md-2">
      <label for="minValue">Min value</label>
      <input name="minValue" type="text" value=0 class="form-control" id="minValue">
    </div>
    <div class="form-group col-md-2">
      <label for="frameAmount">Number of frames</label>
      <input name="frameAmount" type="text" value=10 placeholder="10" class="form-control" id="frameAmount">
    </div>
    <div class="form-group col-md-2">
      <label for="translation">Translation</label>
      <input name="translation" type="text" class="form-control" id="translation" placeholder="x">
    </div>
    <div class="form-group col-md-2">
      <label class="text-center" for="linearInterpolation">Power of linear interpolation</label>
      <input name="linearInterpolation" type="text" value=5 class="form-control" id="linearInterpolation">
    </div>
    <div class="form-group col-md-2">
      <label for="omitted">list of omitted sensors</label>
      <input name="omitted" type="text" class="form-control" id="omitted" placeholder="format eg. L4, L3, etc" value="">
    </div>
  </div>
  <div class="d-flex flex-row justify-content-center">
    <button id="form-submit" type="submit" class="text-center btn btn-primary">Submit</button>
  </div>
</form>

And here is my JavaScript $form.addEventListener('submit', (event) => { event.preventDefault() const formData = new FormData(event.target) // log our form object console.log(formData) event.target.reset() })

在我的控制台日志中，为什么我没有获得带有属性和值的表单数据对象，这些属性和值设置为输入的名称值作为键，输入的值设置为值？相反，我只是得到一个空的表单数据对象。

Answer 1

$form 的命名约定通常用于指示 jQuery 的使用。如果是这种情况，那么您的表单没有正确的 jQuery 引用，即使有，您也没有对事件回调进行正确的 jQuery 配置。

即使您没有使用 jQuery，$form 也不是对您的表单的正确引用，该表单具有 id=heatmap-form。

此外，您不能直接从 FormData 获取实际的表单字段值。 对象。您必须使用 FormData 实例的众多属性/方法之一来访问数据。

let $form = document.querySelector("form");
$form.addEventListener('submit', (event) => {
  event.preventDefault()

  const formData = new FormData(event.target)
  // Loop over the key/value pairs contained in the FormData object
  // the .entries() method returns an enumerable for us to loop over
  for(var pair of formData.entries()) {
     console.log(pair[0]+ ', '+ pair[1]); // Get the key and the value
  }

  event.target.reset();
})

<form id="heatmap-form">
  <div class="form-row text-center">
    <div class="form-group col">
      <label for="parameter">Parameter</label>
      <span class="asterisk_input"></span>
      <select name="parameter" id="parameter" class="custom-select">
          <option selected>Select a parameter</option>
          <option value="air_temperature">Air humidity</option>
          <option value="air_pressure">Air temperature</option>
          <option value="air_humidity">Air pressure</option>
        </select>
    </div>
    <div class="form-group col">
        <label for="unit">Unit</label>
        <span class="asterisk_input"></span>
        <input name="unit" type="text" class="form-control" id="unit" placeholder="C, F, %, hPa etc" required>

    </div>
    <div class="form-group col">
        <label for="height">Height</label>
        <span class="asterisk_input"></span>
        <input name="height" type="text" class="form-control" id="height" placeholder="In CM format" required>
    </div>
    <div class="form-group col">
        <label for="startTime">Start time</label>
        <span class="asterisk_input"></span>
        <input name="startTime" type="datetime-local" class="form-control" id="startTime" placeholder="time" required>
    </div>    
  </div>
  <button id="optional-button" type="button" class="text-center my-4 btn btn-large btn-secondary">Show optional parameters</button>
  <div id="optional-form" class="hidden form-row text-center optional-form">
    <div class="form-group col-md-2">
        <label for="endTime">End Time</label>
        <input name="endTime" type="datetime-local" class="form-control" id="endTime">
    </div>
    <div class="form-group col-md-2">
        <label for="maxValue">Max value</label>
        <input name="maxValue" type="text" value=0 class="form-control" id="maxValue">
    </div>
    <div class="form-group col-md-2">
        <label for="minValue">Min value</label>
        <input name="minValue" type="text" value=0 class="form-control" id="minValue">
    </div>
    <div class="form-group col-md-2">
        <label for="frameAmount">Number of frames</label>
        <input name="frameAmount" type="text" value=10 placeholder="10" class="form-control" id="frameAmount">
    </div>
    <div class="form-group col-md-2">
        <label for="translation">Translation</label>
        <input name="translation" type="text" class="form-control" id="translation" placeholder="x">
    </div>
    <div class="form-group col-md-2">
        <label class="text-center" for="linearInterpolation">Power of linear interpolation</label>
        <input name="linearInterpolation" type="text" value=5 class="form-control" id="linearInterpolation">
    </div>
    <div class="form-group col-md-2">
        <label for="omitted">list of omitted sensors</label>
        <input name="omitted" type="text" class="form-control" id="omitted" placeholder="format eg. L4, L3, etc" value="">
    </div>   
  </div>
  <div class="d-flex flex-row justify-content-center">
    <button id="form-submit" type="submit" class="text-center btn btn-primary">Submit</button>
  </div>
</form>