Q:

Form is posting nothing when trying to post formdata using ajax

When posting my form using ajax I see all data is entirely empty. A result comes back from the php page I am posting to, so the ajax call works fine.
This is my ajax code:
$("#vacature-form").on('submit',(function(e){
    e.preventDefault();
    grecaptcha.ready(function() {
     // do request for recaptcha token
     // response is promise with passed token
     grecaptcha.execute('6LdtbqEUAAAAAMU9yt7aKM0H0xUqXpQOsNhn0nNA', {action: 'new_email'}).then(function(token) {
         // add token to form
         $('#vacature-form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
         $.ajax({
            url: "mail/mail_send.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                $(".error-container2").slideDown().html(data);
            },
            error: function(){
                console.log('oops');
            }
        });
     });
    });
}));

And this is my html form:
<form id="vacature-form" action="mail/mail_send.php" enctype="multipart/form-data" method="post" class="contact_form row contact-form" role="form">
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="name" class="form-control form-control-name" tabindex="1" maxlength="35" required="">
        <label class="control-label">Naam</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <select class="geslacht form-control geslacht-control" name="geslacht" required>
            <option value="" disabled selected>Kies uw geslacht</option>
            <option value="Man">Man</option>
            <option value="Vrouw">Vrouw</option>
        </select>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="place" class="form-control form-control-place"tabindex="1" maxlength="35" required="">
        <label class="control-label">Woonplaats</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="phone" class="form-control form-control-phone" tabindex="1" maxlength="35" required="">
        <label class="control-label">Telefoonnummer</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="file" name="files[]" class="file-control form-control form-control-file" tabindex="1" maxlength="35" multiple>
        <label class="control-label">Upload je CV</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="email" class="form-control form-control-email h5-email" tabindex="1" maxlength="35" required="">
        <label class="control-label">Emailadres</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <textarea name="message" class="form-control form-control-message" cols="30" rows="10" tabindex="4" required=""></textarea>
        <label class="control-label">Bericht</label>
    </p>
    <p class="col-sm-12">
        <button class="btn btn-fullcolor sendbutton" type="submit">Verzenden</button>
    </p>
    <div class="col-sm-12">
        <div class="error-container2 lean"></div>
    </div>
</form>

I've tried adding enctype="multipart/form-data" to my form but this changed nothing.
Form Data in my network tab shows nothing, not even the names of the input fields in my form, it's just completely empty. How can I fix that?

A:

You are using this to get the form, inside the promise resolve callback, but you should do it like this
$("#vacature-form").on('submit',(function(e){
        e.preventDefault();
        var form = e.target;
        grecaptcha.ready(function() {
         // do request for recaptcha token
         // response is promise with passed token
         grecaptcha.execute('6LdtbqEUAAAAAMU9yt7aKM0H0xUqXpQOsNhn0nNA', {action: 'new_email'}).then(function(token) {
             // add token to form
             $('#vacature-form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
             $.ajax({
                url: "mail/mail_send.php",
                type: "POST",
                data:  new FormData(form),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
                    $(".error-container2").slideDown().html(data);
                },
                error: function(){
                    console.log('oops');
                }
            });
         });
        });
    }));

