Форма ничего не публикует при попытке опубликовать форматы данных с помощью ajax

Question

При публикации формы с использованием ajax я вижу, что все данные полностью пусты. Результат возвращается со страницы php, на которую я отправляю сообщения, поэтому вызов ajax работает нормально.

Это мой код Ajax:

$("#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');
            }
        });
     });
    });
}));

А это моя HTML-форма:

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

Я пытался добавить enctype="multipart/form-data" в мою форму, но это ничего не изменило.

Form Data в моей сетевой вкладке ничего не отображается, даже имена полей ввода в моей форме, просто они абсолютно пустые. Как я могу это исправить?

Answer 1

Вы используете 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');
                }
            });
         });
        });
    }));