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