Exlude empty properties from Javascript ajax formData-CodePudding

I have form that sends form data

The empty fields[] appear when there is no option selected.

Is there any way I can exclude the empty fields[] from sending via the formData in my Javascript?

Sending Header Output

fields[name]: name
fields[phone]: phone
fields[]: 
fields[]:

$('body').on('submit', '#submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  // logs what's the actual properties sent
  for (var prop of formData) console.log(prop);
    $.ajax({
    url: $(this).attr('action'),
    data: formData,
    type: 'POST',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    //success
  }).fail(function() {
    //eror
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="submit">
  <select name="fields[name]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>

  <select name="fields[phone]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <select name="fields[email]">
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <input type="submit"/>
</form>

CodePudding user response：

We are guessing that you want to clean up all form properties having empty value. That's a way to do it, it could be more optimal but this is easier for understanding.

$('body').on('submit', '#submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var formDataNonEmpty = new FormData();
  // add all non empy entries to formDataNonEmpty
  for (var prop of formData) if (prop[1]) formDataNonEmpty.append(prop[0], prop[1]);
  // logs what's the actual properties sent
  for (var prop of formDataNonEmpty) console.log(prop);
    $.ajax({
    url: $(this).attr('action'),
    data: formDataNonEmpty,
    type: 'POST',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    //success
  }).fail(function() {
    //eror
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="submit">
  <select name="fields[name]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>

  <select name="fields[phone]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <select name="fields[email]">
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <input type="submit"/>
</form>