AJAX forms do not work anymore with captcha

[kaphadley]

Hi,

AJAX forms (as described in the documentation) do not work anymore when the form contains a type: captcha field.

Ajax and captcha work fine wight grav-plugin-form v3.0.8, but fails from at least v4.0.0.

[marcocevoli]

Same issue here.

[rhukster]

we'll take a look at this...

[dledanseur]

This is due to the captcha integration bypassing our own event handlers by submitting the form. As a workaround, you can override the form's submit function. For instance, adapting the documentation:

const form = document.querySelector('#ajax-test-form');
form.submit = function() {

    const result = document.querySelector('#form-result');
    const action = form.getAttribute('action');
    const method = form.getAttribute('method');

    fetch(action, {
        method: method,
        body: new FormData(form)
    })
    .then(function(response) {
        if (response.ok) {
            return response.text();
        } else {
            return response.json();
        }
    })
    .then(function(output) {
        if (result) {
            result.innerHTML = output;
        }
    })
    .catch(function(error) {
        if (result) {
            result.innerHTML = 'Error: ' + error;
        }

        throw new Error(error);
    });
}

[kaphadley]

@dledanseur your code is the same as the one from the documentation, except the missing event.preventDefault();. How is it supposed to solve the issue?

[dledanseur]

@dledanseur your code is the same as the one from the documentation, except the missing event.preventDefault();. How is it supposed to solve the issue?

Not exactly the same, the key point here is to override the form's submit function with form.submit =

[marcocevoli]

Any news about this. We're getting loads of spam because we needed to disable the captcha...

[01Kuzma]

More than a year has passed since the last answer... Spam is a real problem. Any news?
Moreover it doesn't work with dropzone