Error 400 when submitting a form with an input checkbox - html

Question

I have this form:
<form id="formUpload" action="/php/upload.php" name="formUpload" method="post" enctype="multipart/form-data">
<div class="row mb-3">
<label for="target" class="col-sm-3 col-md-2 col-form-label">Type</label>
<div class="col-sm-4">
<select class="form-select" name="target" aria-label="Target" required>
<option value="config" selected>Configuration</option>
<option value="app">Application</option>
<option value="media">Content</option>
<option value="sys">System</option>
</select>
</div>
<div class="col-auto">
<div class="col-form-label form-check">
<input class="form-check-input" type="checkbox" name="incremental" value="true" checked >
<label class="form-check-label" for="incremental">Incremental</label>
</div>
</div>
</div>
<div class="row mb-3">
<label for="id-type" class="col-sm-3 col-md-2 col-form-label">Target ID</label>
<div class="col-sm-4">
<select class="form-select" name="id-type" aria-label="Mode">
<option value="broadcast" selected>Broadcast</option>
<option value="target">Target</option>
</select>
</div>
<div class="col-sm-4 col-lg-3">
<input type="text" class="form-control" name="id" disabled required>
</div>
</div>
<div class="row mb-3">
<label for="id" class="col-sm-3 col-md-2 col-form-label">Revision</label>
<div class="col-sm-4 col-md-3 col-lg-2">
<input type="number" class="form-control" name="revision" min="1" max="999" value="1" required>
</div>
</div>
<div class="row mb-3">
<label for="upload_file" class="col-sm-3 col-md-2 col-form-label">Package</label>
<div class="col-sm-9 col-md-10">
<input type="file" class="form-control" name="file" accept=".zip" required>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Upload"/>
</form>
and this JavaScript:
function uploadFile() {
const action = $("#formUpload").attr("action");
const bar = $("#progressUpload");
const dialog = $("#modalUpload");
const alertOk = $("#alertUploadOk");
const btnClose = $("#btnClose");
const btnAbort = $("#btnAbort");
dialog.modal("show");
btnClose.prop("disabled", true);
btnAbort.prop("disabled", false);
const formData = new FormData($("#formUpload")[0]);
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
$.ajax({
xhr: function() {
window.xhr = xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
console.log("progress");
const percentComplete = Math.floor(e.loaded / e.total) * 100;
const percentVal = percentComplete + '%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
}
}, false);
xhr.addEventListener('abort', function(e){
btnClose.prop("disabled", false);
btnAbort.prop("disabled", true);
}, false);
return xhr;
},
type: 'POST',
url: action,
data: formData,
contentType: false,
processData: false,
cache: false,
beforeSend: function() {
let percentVal = '0%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
},
success: function(data, status, xhr) {
let percentVal = '100%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
alertOk.show();
},
complete: function(xhr) {
if (xhr.status !== 200) {
alert(xhr.status + xhr.responseText);
dialog.modal("hide");
} else {
btnClose.prop("disabled", false);
btnAbort.prop("disabled", true);
reloadTable();
}
}
});
}
I get an error "400 Bad Request".
But if I remove this line:
<input class="form-check-input" type="checkbox" name="incremental" value="true" checked />
I can submit my form successfully.
What's wrong in my code?
Here the content of the formData:
target config
incremental true
id-type broadcast
revision 1
file File { name: "generic_config_0001.zip", lastModified: 1651224479000, webkitRelativePath: "", size: 755, type: "application/zip" }