Passing multidimensional with dynamic form via ajax to PHP

Question

I'm developing an invitation system to our platform. The end user will be able to add as many users as he want. For that, I prepared a dynamic form:

HTML:

                <div class="col-xs-3">
                    <input type="text" class="form-control" id="user0first_name" name="user[0]first_name" placeholder="First Name" />
                </div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="user0last_name" name="user[0]last_name" placeholder="Last Name" />
                </div>
                <div class="col-xs-4">
                    <input type="text" class="form-control" id="user0email" name="user[0]email" placeholder="Email" />
                </div>

JS

$("#invitation").click(function(event){
    var data = {};

    for (var i = 0; i <= emailIndex; i++) {
       data["user[" + i + "]first_name"] = $("#user" + i + "first_name").val();
       data["user[" + i + "]last_name"] = $("#user" + i + "last_name").val();
       data["user[" + i + "]email"] = $("#user" + i + "email").val();
    }

    console.log(data);

PHP

    $name = $_POST['user'];

    foreach( $name as $v ) {
        print $v['first_name'];
    }

This just print me the "email" column:

Email1valueEmail2value

I need to catch the first name and last name too.

What I'm doing wrong?

Answer 1

Javascript:

$("#invitation").click(function(event){
var data = [];
for (var i = 0; i <= emailIndex; i++) {
   var obj = new Object();
   obj.first_name = $("#user" + i + "first_name").val();
   obj.last_name = $("#user" + i + "last_name").val();
   obj.email = $("#user" + i + "email").val();
   data.push(obj);
}
console.log(data);

PHP

$name = $_POST['user'];
foreach( $name as $v ) {
    print $v['first_name'];
}