too long

Question

I have an HTML form. When the form is submitted, a jQuery code is executed to append an array of objects before data is sent to the server. Each object contains information retrieved outside the form.

<form method="post" id="formID" action="test.php" accept-charset="utf-8">
    <!-- form inputs -->
</form>

$('#formID').submit(function() {
    var form = $(this);     
    $('.file').each(function(index) {
        var filedata = {
            name: $(this).find('.name').text(), 
            ordernum: index, 
            size: $(this).find('.size').text()
        };
        form.append('<input type="hidden" name="filedata[]" value="' + filedata + '"/>');
    });
});

My goal would be to retrieve these information on server side. Unfortunately, when I output $_POST data, I only get a generic Object data.

echo '<pre>';
print_r($_POST['filedata']);
echo '</pre>';

/* output */
Array
(
    [0] => [object Object]
    [1] => [object Object]
)

Is there a way to send an array of objects when submitting a form to server without using AJAX requests?

Answer 1

You need to stringify the object you concatenate to the HTML:

form.append('<input type="hidden" name="filedata[]" value="' + JSON.stringify(filedata) + '"/>');

You then need to deserialize that value in your PHP:

foreach($_POST['filedata'] as $d => $data)
{
    $obj = json_decode($data);
    echo '<pre>';
    print_r($obj['name']);
    print_r($obj['ordernum']);
    print_r($obj['size']);
    echo '</pre>';
}