Why aren't I getting my form data object with input values in this submit listener?

Question

I have an HTML form, it\'s a pretty simple form, there\'s only 4 values that are required. It looks like this.

相关标签:

Answer 1

You want to make yourself familiar with the FormData API. Use formData.entries() to access these:

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

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

<form id="$form">

  <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>
  <button id="form-submit" type="submit" class="text-center btn btn-primary">Submit</button>
</form>

Answer 2

Your naming convention of $form is common to indicate the use of jQuery. If that is the case, then you don't have a proper jQuery reference to your form and, even if you did, you aren't making a proper jQuery configuration of the event callback.

Even if you are not using jQuery, then $form isn't a proper reference to your form, which has an id=heatmap-form.

Also, you don't get your actual form field values directly from a FormData object. You have to access the data with one of the many properties/methods of a FormData instance.

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>