'Error 400 when submitting a form with an input checkbox

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source