create input and send value whit jQuery but value dosnt send

Question

I want to add input whit js and send value whit jQuery but value dosnt send.

Actually fields value dosn't define in jQuery.

function addElement(myDiv, type) {
    var ni = document.getElementById(myDiv);
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value - 1) + 2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my' + num + 'Div';
    newdiv.setAttribute('id', divIdName);

    newdiv.innerHTML = '<input class="name" name="name[]" value="" placeholder="عنوان"><input class="value" name="value[]" value="" placeholder="توضیحات"><input type="hidden" class="type" name="type[]" value="' + type + '"><input type="hidden" class="position" name="position[]" value="' + myDiv + '">'
    ni.appendChild(newdiv);
}

$('#add_field').live('click', function() {    
    var id = $('#id').val();
    var name = $('#name').val();
    var value = $('#value').val();
    var type = $('#type').val();
    var position = $('#position').val();

    var name = [];
    var value = [];
    var type = [];
    var position = [];

    $(".name").each(function() {
        name.push($(this).val());
    });

    $(".value").each(function() {
        type.push($(this).val());
    });

    $(".position").each(function() {
        size.push($(this).val());
    });

    $.ajax({
        type: 'POST',
        url: '../inc/add.field.php?id=' + id,
        data: {
            name: name,
            type: value,
            size: type,
            position: position
        },
        success: function(data) {
            $('#result').html(data);
        }
    });
});

PHP

print_r($_POST['name']);
print_r($_POST['value']);
print_r($_POST['type']);
print_r($_POST['position']);
echo $_GET['id'];

Notice: Undefined index: name

Notice: Undefined index: value

Notice: Undefined index: type

Notice: Undefined index: position

Answer 1

Use this ajax. Note that the $('form') selector needs to be a valid selector that targets your <form> tag. If you serialize, the arrays will be passed as arrays in HTTP, not as a javascript array value. With this mode, PHP will recognize them as arrays, not as [OBJECT object] value

$.ajax({
    type: 'POST',
    url: '../inc/add.field.php?id=' + id,
    data: $('form').serialize(); // that's the change
    success: function(data) {
        $('#result').html(data);
    }
});

EDIT

Test with serializeArray():

$.ajax({
    type: 'POST',
    url: '../inc/add.field.php?id=' + id,
    data: $('form').serializeArray(); // that's the change
    success: function(data) {
        $('#result').html(data);
    }
});

More info: https://api.jquery.com/serializeArray/

EDIT 2

As I said in comments, you can make it with serialize():

http://jsfiddle.net/tZPg4/15519/

It works perfectly.