Ajax POST HTML form with elements array using jQuery

Question

My Form looks like this:

<form id="invite-form" method="post" action="" >
 <input type="text" name=friends[0][first_name] />
 <input type="text" name=friends[0][last_name] />
 <input type="text" name=friends[0][email] />

 <input type="text" name=friends[1][first_name] />
 <input type="text" name=friends[1][last_name] />
 <input type="text" name=friends[1][email] />

 <input type="text" name=friends[2][first_name] />
 <input type="text" name=friends[2][last_name] />
 <input type="text" name=friends[2][email] />

 <input type="submit" value="Invite" />
</form>

And here is my javascript code:

var friends = [];
    jQuery("#invite-form").serializeArray().map(function(x){friends[x.name] = x.value;});
    var formData = {
        'friends'    : JSON.stringify(friends),
        'action'   : 'invite-friends'
    };
    jQuery.ajax({
        type        : 'POST',
        url         : '/invitation.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    }).done(function(data){
        console.log(data);
        if(data.success == true){
        ...

It doesn't work properly and the list of friends is not POSTed properly. How do I convert this kind of form to json data properly? I want to be able to use this data as a regular array, as if it were a regular form POSTed.

Answer 1

In this way you can submit form with serialize data and you many use post or get request for this or any other method.

jQuery("#invite-form").submit(function(e) {
   e.preventDefault();
   let data = jQuery(this).serialize();
    jQuery.ajax({
                type: "get",
                url: 'invitation.php',
                data: data,
                cache: false,
                success: function(data){
                    console.log(data);
                }
            });
 });