jQuery Ajax to php get form data in structured array

Question

I have a form which contains multiple group fields.Which is posted via ajax on. Everything is okay.I just need to create an array to send it to the backend.I am using serializeArray().may be it is wrong form to send data.That's why i am geting error

<form method="post" id="tasks-multiform">
<div id="people-container">
    <h3>Person 1:</h3>
    <p>
        <label>First name</label><br>
        <input name="people[1][first_name]">
    </p>

    <p>
        <label>Last name</label><br>
        <input name="people[1][last_name]">
    </p>

    <p>
        <label>Email</label><br>
        <input name="people[1][email]">
    </p>

    <h3>Person 2:</h3>
    <p>
        <label>First name</label><br>
        <input name="people[2][first_name]">
    </p>

    <p>
        <label>Last name</label><br>
        <input name="people[2][last_name]">
    </p>

    <p>
        <label>Email</label><br>
        <input name="people[2][email]">
    </p>
</div>

<a href="javascript:;" id="add-new-person" class="add-new-person">Add! new person</a>

<p>
<input type="submit" value="Save">
</p>
</form>

Above is the form and data is posted via ajax.And below is jquery codes..avoid action its wp backend function

jQuery(document).on('submit', '#tasks-multiform', function(e){
e.preventDefault();
var form = jQuery('form#tasks-multiform');
var data = form.serializeArray();
console.log(data);
jQuery.ajax({
    type : 'post',
    url : admin_ajax.ajax_url,
    data : {
        action : 'utasks',
        tasksdata : data,
        tasksnums : tasksnums,
    },
    beforeSend : function(){
        jQuery('.tasksubmit').attr('disabled', 'disabled');
    },
});
});

i wanted somethin like :

{"1"=>
    {
       "first_name"=>"", 
       "last_name"=>"", 
       "email"=>""
    }, 
 "2"=>
    {
       "first_name"=>"", 
       "last_name"=>"", 
       "email"=>""
    }
 }

But what i am getting:

{"1"=>
    {
       "[prople][1][first_name]"=>"", 
    }, 
 "2"=>
    {
       "[prople][1][last_name]"=>"", 
    }, 
 "3"=>
    {
       "[prople][1][email]"=>"", 
    }, 
 "4"=>
    {
       "[prople][2][first_name]"=>"",
    } 
 "5"=>
    {
       "[prople][2][last_name]"=>"", 
    } 
 "6"=>
    {
       "[prople][1][email]"=>""
    }
 }

How can i resolve this?

Pretty sure you don't need to serialize array as you already have it in an array called 'people'. — Gavin Thomas, Mar 13 '18 at 15:28

score 0 · Answer 1 · answered Mar 13 '18 at 15:52

You can start by using reduce() function (see this solution). Then, you just have to use a loop to get your data.

Example :

var data = form.serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

With this, you get this data :

{
    "people[1": {
        "first_name": "Lorem",
        "last_name": "L",
        "email": "lorem@example.com"
    },
    "people[2": {
        "first_name": "Ipsum",
        "last_name": "I",
        "email": "ipsum@example.com"
    }
}

Now you can just loop inside your object, or find a workaround to get either nice indexes instead of people[1, people[2, .. or an array of object.

score 0 · Answer 2 · answered Mar 13 '18 at 16:18

You can also use FormData as such :

formData = new FormData(jQuery('form#tasks-multiform')[0]);
formData.append("action", "utasks");
formData.append("tasksnums", tasksnums);

Then send it with data : formData in your .ajax() parameters.

Yet another option is to take a look at this serialize object plugin.

Hope this help !

jQuery Ajax to php get form data in structured array

2 Answers2