How 2D array is handled in HTTP POST request

Question

I have a HTML Form like below which uses 2D array to store input elements

<form action="/myAction" method="post">
  <input type="text" name="myList[1][NAME]" value="John" />
  <input type="text" name="myList[1][AGE]" value="20" />
  <input type="text" name="myList[2][NAME]" value="Mike" />
  <input type="text" name="myList[2][AGE]" value="30" />
  <input type="text" name="myList[3][NAME]" value="Sam" />
  <input type="text" name="myList[3][AGE]" value="40" />
  <input type="submit" value="submit" />
</form>

I wish to know how many parameters will be passed in the HTTP request, will it be only one or six. How can I write my form so that above 6 key-value pairs are passed as one parameter.

Thank you for you inputs.

EDIT: Looks like below request is sending 6 params in request, how can I have only param be sent for below form

<form action="/myAction" method="post">
  <input type="text" name="myList[]" value="John" />
  <input type="text" name="myList[]" value="Peter" />
  <input type="text" name="myList[]" value="Mike" />
  <input type="text" name="myList[]" value="Neo" />
  <input type="text" name="myList[]" value="Stella" />
  <input type="text" name="myList[]" value="Eve" />
  <input type="submit" value="submit" />
</form>

Answer 1

By default, the form will be submitted with application/x-www-form-urlencoded content type, so your data will be URI-encoded by these rules.

Encoded:

myList%5B%5D=John&myList%5B%5D=Peter&myList%5B%5D=Mike&myList%5B%5D=Neo&myList%5B%5D=Stella&myList%5B%5D=Eve

Decoded:

myList[]=John&myList[]=Peter&myList[]=Mike&myList[]=Neo&myList[]=Stella&myList[]=Eve

If you want to submit only one parameter, you should encode your data on client side, e.g. you can separate all values by comma.

Here's a working example (using jQuery):

$('form').submit(function(e) {
    processFormSubmission(this);
});

function processFormSubmission(formElem) {
    var arr = [];
    $(formElem).find(':input').each(function(i) {
        $(this).attr('disabled', 'disabled');    // prevent from submitting
        if( $(this).is(':submit') ) return true; // skip submit input field
        arr.push(this.value);
    });
    $('<input>').attr({type: 'hidden', name: '_data', value: arr.join(',')}).appendTo(formElem);
}

The above code will create hidden _data input and will add disabled attribute to other input fields, so they will be not submitted to server.

_data=John,Peter,Mike,NeoStella,Eve

On server side you should decode that data, e.g. something like this:

// var_dump( $_POST );

if( ! empty( $_POST['_data'] ) {
    $myList = explode(',', $_POST['_data']);
    // var_dump( $myList );
}

Answer 2

The response will look like this

Array
(
    [myList] => Array
        (
            [1] => Array
                (
                    [NAME] => John
                    [AGE] => 20
                )
            [2] => Array
                (
                    [NAME] => Mike
                    [AGE] => 30
                )
            [3] => Array
                (
                    [NAME] => Sam
                    [AGE] => 40
                )
        )
)

edit: to answer your question more specifically, there will only be a single parameter in the response, but that parameter will be an array. Each element of the array will be an array itself (note that this is an array of arrays, not technically a 2D array, that's not quite the same thing).

Generally your model is good, this data would be very easy to work with on the server side.