WordPress AJAX Form With Array Elements

Question

To be 100% clear, I'm not asking how to use ajax with WordPress... I already know how to do that.

My issue is that I have form elements with array names that aren't parsing the way I need them to into the $_POST variable. I'm getting the javascript FormData syntax rather than the PHP syntax.

Example...

the HTML...

<form id="registerForm">
    <input name="borrower[0][first_name]">
    <input name="borrower[0][last_name]">
    <input name="borrower[1][first_name]">
    <input name="borrower[1][last_name]">
    <button>Submit</button>
</form>

the JS...

$('#registerForm').submit(function() {
    var data = $(this).serializeArray();
    // also tried data = new FormData(document.getElementById('registerForm'));
    $.ajax(
        url: ...,
        dataType: 'json',
        data: {
            action: 'some_wp_action',
            formData: data
        },
        success: function(response) {
            console.log(response);
        }
    );
})

the PHP...

add_action( 'wp_ajax_some_wp_action', 'some_wp_action' );
add_action( 'wp_ajax_nopriv_some_wp_action', 'some_wp_action' );

function some_wp_action() {
    exit(json_encode($_POST['formData']));
}

the output...

[
    {"name":"borrower[0][first_name]","value":"John"}
    {"name":"borrower[0][last_name]","value":"Doe"}
    {"name":"borrower[1][first_name]","value":"Jane"}
    {"name":"borrower[0][last_name]","value":"Doe"}
]

I need the output to be an associative array like it would be if you just posted the form data naturally...

[
    {"borrower":[
        {"first_name":"John","last_name":"Doe"},
        {"first_name":"Jane","last_name":"Doe"}
    ]}
]

Community · Accepted Answer · 2017-05-23 10:28:30Z

1

OK so I think the answer is here: Convert form data to JavaScript object with jQuery

You'll want to use the serializeObject function. Here's a simple fiddle.

So your js would probably come out looking something like this:

$('#registerForm').submit(function() {
    var data = $(this).serializeObject();
    $.ajax({
        url: "submit.php",
        data: {
            action: 'some_wp_action',
            user: data
        },
        success: function(response) {
            $("#msg").html(response);
        }
    });
    return false;
})

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

It's also unclear from the example you posted why you need to explicitly state the user[0] location for only one user anyway, so I simplified it for this example as such:

<form action="submit.php" id="registerForm" onsubmit="return false">
    <input name="username">
    <input name="email">
    <input type="password" name="pw">
    <input type="password" name="pw_confirm">
    <button>Submit</button>
</form>

this produced the following output:

{"action":"some_wp_action","user":{"username":"asdf","email":"fdsa","pw":"pasasdf","pw_confirm":"pasfdsa"}}

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 4, 2016 at 19:51

Jeff Puckett

41.5k19 gold badges125 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zgr024 Over a year ago

In the use case specified the array input may not be necessary however there are use cases that would require it which is why I need it. Perhaps I should have used a better example such as borrower[0][first_name] and borrower[1][first_name] which is useful for joint applicants in a loan

Jeff Puckett Over a year ago

the concept should be the same, have you tried using the serializeObject function?

zgr024 Over a year ago

It does not work. It returns... {"borrower[0":"first_name":"John","last_name":"Doe"}}

zgr024 Over a year ago

This is partially the answer. I had to use $(this).serializeObject(), append to it with data.action = 'some_wp_action' and then data: data in the ajax call

Collectives™ on Stack Overflow

WordPress AJAX Form With Array Elements

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related