Admin Ajax and HTML5 Formdata

Question

When using FormData with Wordpress Admin Ajax I'm only getting back a '0' response. Usually this is because there's no action, however I'm including the action and still have the problem. I've seen similar questions on here but they all assume jQuery is being used, and in my case it isn't.

Javascript:

            if ($this.valid()) {

                var form_data = new FormData(form);
                form_data.append('security', WP.nonce);
                form_data.append('action', form.action);

                console.log(form.action); // console shows http://test.dev/newsletter_signup

                u.jax.post(WP.ajax, form_data, onSent);

                function onSent(result) {
                    if (result.success) {
                        $this.html('<p class="form-sent">' + $this.data('success') + '</p>');
                    } else {
                        $this.html('<p class="form-sent">' + result.data + '</p>');
                    }
                }
            }

PHP:

add_action('wp_ajax_newsletter_signup',         'newsletter_signup');
add_action('wp_ajax_nopriv_newsletter_signup',  'newsletter_signup');

HTML:

<form action="newsletter_signup" class="newsletter-signup js-process-form" autocomplete="off">
        <div class="field">
            <label for="newsletter-email" class="field__label">Your Email Address</label>
            <input type="email" class="field__input" name="email-address" id="newsletter-email" required data-msg-required="We need to know your email address" value="[email protected]">
            <button type="submit" class="field__button">submit</button>
        </div>

    </form>

The only problem I can see is that the action is getting the domain appended before it. If I do this with jquery ajax, it works fine, so the code seems down to the javascript. I can provide the ajax functions but they're pretty generic.

If there's any more code you need, let me know.

Thanks.

Edit for comments:

I have tried changing the form to the hidden action input field as mentioned in the comments:

<form action="">
        <input type="hidden" name="action" value="newsletter_signup"/>

        <div class="field">
            <label>Your Email Address</label>
            <input type="email" name="email-address">
            <button type="submit">submit</button>
        </div>

    </form>

This is the formdata sent on submit:

------WebKitFormBoundarycskAgc8KcinCzpoG
Content-Disposition: form-data; name:"action"

newsletter_signup
------WebKitFormBoundarycskAgc8KcinCzpoG
Content-Disposition: form-data; name="email-address"

[email protected]
------WebKitFormBoundarycskAgc8KcinCzpoG--

And it's being sent to:

http://test.dev/wp-admin/admin-ajax.php

Edit #2:

Sending a get request like:

u.jax.get('http://test.dev/wp-admin/admin-ajax.php?action=newsletter_si‌​gnup&email-address=t‌​[email protected]', function(s){
                console.log(s)
            });

Also results in a response of 0.

Here are my js ajax functions, incase it provides some clarity:

// ===== Ajax Utilities
// Handles Ajax Responses
function _handleResponse(request, success) {
    request.onreadystatechange = function() {
        if (request.status >= 200 && request.status < 400) {

            if (typeof request.responseText == 'string') {
                data = request.responseText;
            } else {
                data = JSON.parse(request.responseText);
            }

            success(data);

        } else {
            return request.status + ' failed request: '+ JSON.parse(request.responseText);
        }
    };

    request.onerror = function() {
        return request.status + ' failed request: '+ JSON.parse(request.responseText);
    };
}

// Ajax GET & POST
u.jax = {
    get: function(url, success) {
        var request = new XMLHttpRequest();

        request.open('GET', url, true);
        request.send(null);

        _handleResponse(request, success);

    },
    post: function(url, data, success) {
        var request = new XMLHttpRequest();

        request.open('POST', url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);

        _handleResponse(request, success);
    }
};

Postman Headers for the get request:

Cache-Control →no-cache, must-revalidate, max-age=0
Connection →Keep-Alive
Content-Length →1
Content-Type →text/html; charset=UTF-8
Date →Fri, 03 Mar 2017 16:16:54 GMT
Expires →Wed, 11 Jan 1984 05:00:00 GMT
Keep-Alive →timeout=5, max=100
Server →Apache/2.4.20 (Unix) PHP/5.5.35 mod_wsgi/3.5 Python/3.5.1 OpenSSL/1.0.1p
X-Content-Type-Options →nosniff
X-Frame-Options →SAMEORIGIN
X-Powered-By →PHP/5.5.35
X-Robots-Tag →noindex

Answer 1

So it turns out the only problem was the header content type.

By removing request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); and just leaving it out, it worked fine. That's also with the form action being grabbed and appended.

Ajax call:

var formData = new FormData(form);
formData.append('security', WP.nonce);
formData.append('action', form.getAttribute('action'));

u.jax.post(WP.ajax, formData, onSent);

Ajax Function:

u.jax.post = function(url, data, success) {
    var request = new XMLHttpRequest();

    request.open('POST', url, true);
    request.send(data);

    request.onreadystatechange = function() {
        if (request.readyState === 4) {

            if (typeof request.responseText == 'string') {
                data = request.responseText;
            } else {
                data = JSON.parse(request.responseText);
            }

            success(data);
            return;

        }
    };
}

Form:

<form action="newsletter_signup">

    <div class="field">
        <label>Your Email Address</label>
        <input type="email" name="email-address">
        <button type="submit">submit</button>
    </div>

</form>

PHP:

function newsletter_signup(){

    // Get the email address
    $email = sanitize_email($_POST['email-address']);

    // Do what you wish with the email address.

    //Setup the data to send back
    $data = array();

    // json encode the data to send back
    echo json_encode($data);
    exit;

}

add_action('wp_ajax_newsletter_signup',         'newsletter_signup');
add_action('wp_ajax_nopriv_newsletter_signup',  'newsletter_signup');

Answer 2

FormData is processing the action of your form tag as part of the form data, when that's not what you want to send to admin-ajax.php. Try to find another way to send 'newsletter_signup' as the action to admin-ajax.php, mainly by constructing your own array:

var form_data = new FormData(form);
    form_data.append('security', WP.nonce);
    form_data.append('value', form.value);
    // etc. etc., for each value you want to send

var formData = {

    action: 'newsletter_signup',
    data: form_data

}

u.jax.post(WP.ajax, formData, onSent);

Also, what's sending the 0? Is it admin-ajax.php, or is it a die() somewhere in your php script that's processing this form data?