Problems sending a form post and ajax post simultaneously?

Question

It more than likely is poor programming on my part, but I use a lib 'Croppie' that crops the photo and posts it. The Croppie plugin is wrapped in a form with data that also needs to be sent, but its not working.

$('.submit-btn').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "../Controllers/controller.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                alert("successful");
            }
        });
    });
});

Then the from is sent to the same controller but the post aren't collected together in the global $_POST array.

The Croppie plugin crops and decodes the image then my application is supposed to collect that info and create a record in the database with the rest of the form.

Answer 1

take the croppie resp and set the value of a hidden element to the croppie resp that way all elements get posted together.

$('.submit-btn').on('click', function (ev) {
                   $uploadCrop.croppie('result', {
                       type: 'canvas',
                       size: 'viewport'
                   }).then(function (resp) {

                       let temp = resp;

                       document.getElementById('hiddenElm').value = temp;

                   });
               });