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>

_I wish to know how many parameters will be passed in the HTTP request_: Have a look at the network tab of the developer tools or use a proxy like [Fiddler](http://www.telerik.com/download/fiddler) — Andreas, Jul 23 '15 at 04:48
This is all about how the receiving language parses the post data. Which language or http server lib are you using? — edruid, Aug 09 '15 at 06:03

Kristian Vitozev · Accepted Answer · 2015-08-10T04:38:41.217

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 );
}

Thanks for your response, can you please give me a hint on how to encode data on client side ? how can I convert myList into CSV, when I try join() or toString() its stringfying the whole input element whereas I just want the values to be there. — Ravi Gupta, Aug 04 '15 at 03:34
@unixarmy What is purpose of `.slice(',')` at `arr.slice(',')` ? — guest271314, Aug 10 '15 at 03:26
@guest271314, good catch! I updated the code, `arr.join(',');` is the right method that should be used. — Kristian Vitozev, Aug 10 '15 at 04:39

score 1 · Answer 2 · answered Jul 23 '15 at 05:21

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.

php_nub_qq · Answer 3 · 2015-08-03T07:20:13.523

This is actually a pretty useful feature. If you take a closer look you will notice it is actually pretty close to how arrays are manipulated in PHP itself.

<input type="text" name="myList[]" value="John" />
<input type="text" name="myList[]" value="Peter" />
<input type="text" name="myList[]" value="Mike" />

As in

$myList = [];
$myList[] = "John";
$myList[] = "Peter";
$myList[] = "Mike";

It has been designed so that you can easily create PHP arrays with the name attribute of inputs, example

<input type="text" name="myList[user][100505][name]" value="John" />

Would be the same if you defined it in PHP

$_POST['myList']['user']['100505']['name'] = 'John';

For your PHP module to populate the $_POST array you need to send one of two Content-Type headers: application/x-www-form-urlencoded or multipart/form-data; boundary-... which your browser does automagically. If you pay attention to the request body you will notice that the parameters are defined exactly like your input fields are named, meaning that they will get parsed in the exact same order with the same values.

Consider the following example:

<input type="text" name="myList[]" value="John" />
<input type="text" name="myList[]" value="Peter" />
<input type="text" name="myList[]" value="Mike" />

This will result in an array with 3 elements, however

<input type="text" name="myList[1]" value="John" />
<input type="text" name="myList[1]" value="Peter" />
<input type="text" name="myList[1]" value="Mike" />

This will result in an array with only one element which will be Mike, because the parameters are parsed in the order they are provided and since they all have the same key the last one will be the one you get. Also, don't be fooled that you only get a single element, all elements are being carried by the request and passed to the server, even if you had 1000 inputs you would still get 1 element in your $_POST['myList'] but all 1000 will be parsed.

You can go ahead and use as many levels as you like, just remember that in doing so, if you have a lot of such inputs and a large amount of array levels this may increase the request size noticeably. Also note that as of PHP 7.0 (not out yet) the amount of parameters will be limited to 1000, for security purposes - namely DoS attacks which make use of this weakness and send an insane amount of parameters which the server will try to parse, eating up resources.

i believe @php_nub_qq is on the right track. OP did not specify your back-end tech in the question, but it is safe to assume it's PHP because of the way form inputs are named and the way PHP *automatically* converts those to arrays. — code_monk, Aug 06 '15 at 12:05

score 0 · Answer 4 · edited Oct 07 '21 at 13:28

The use of arrays in HTTP parameters are specific to the client and/or server-side implementations. There are no arrays in the HTTP protocol (POST and GET included), and there is not even a key/value format (see RFC).

The key/value standard is defined by HTML through the use of <form>. When the method is POST, the HTTP query body contains 'some data' whose type is application/www-form-urlencoded.

In the first example, HTML will set a key/value pair for every input field.

The [ and ] characters are just random bytes from the view of the HTTP protocol, and just part of the key/name for HTML.

The HTTP query will look like so:

[...]
Content-Type: application/x-www-form-urlencoded

myList%5B1%5D%5BNAME%5D=John&myList%5B1%5D%5BAGE%5D=20&myList%5B2%5D%5BNAME%5D=Mike&myList%5B2%5D%5BAGE%5D=30&myList%5B3%5D%5BNAME%5D=Sam&myList%5B3%5D%5BAGE%5D=40

Now, the question was:

I wish to know how many parameters will be passed in the HTTP request.

There are always one (or none) query string and a single (or none) body in an HTTP request. So, the question itself doesn't really make sense. If it was more about the HTML, the answer is six. One input field = one key/value pair = one specific information. To have more than one information, you need more than one input field.

I suppose that you're using PHP, which parses the [ and ] characters, so from the view of PHP you'll get this structure:

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

About the other question:

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>

Six inputs = six informations = six key/value. But PHP will give you a single array containing six values. Or maybe you just need a <select> ?

If you're not using PHP, then it's specific to the language you're using, so please clarify the question.

score 0 · Answer 5 · answered Aug 10 '15 at 05:40

0

better practice is to make the array to JSON Objects and pass it.

answered Aug 10 '15 at 05:40

Akhil

443
1
9
29

How 2D array is handled in HTTP POST request

5 Answers5

Linked