Get values from multiple sets of multiple list box generated dynamically

Question

I have a form that dynamically add rows with form fields on my webpage. One row of form field consist of a textbox and a multiple select list. Tutorial source from here: http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

The code for my textbox is:

<input type="textbox" name="name[]" id="name" size="20" maxlength="50" />

And the code for my multiple select list is:

<select name="friend[]" multiple size="4" id="friend" style="width:150px" >
<option value="none" selected="selected">None</option>
<option value="sam">Sam</option>
<option value="jenny">Jenny</option>
<option value="bob">Bob</option>
<option value="aaron">Aaron</option>
</select>

I'm using Javascript to generate multiple rows of the two fields and all rows share the same name. I have no problems with getting the names for different rows as name[0] = name at first row, name[1] = name at second row, and so on.But I'm not able to tell how many did the users select from the multiple list box from each row.

If the user selects "None" from the first row, selects "Sam and Bob" at second row and select "Aaron" only at third row, the friend array will show a linear result, where friend[0] = none, friend[1] = sam, friend[2] = bob, friend[3] = aaron.

How can I tell what values the user selects for each multiple list box using HTML or PHP or Javascript?

Thanks in advance!

Answer 1

Enumerate the fields, then it works like expected.

<select name="friend[1][]"
<select name="friend[2][]"
<select name="friend[3][]"


    var_dump($_POST);

    array(3) {
      ["name"]=>
      array(3) {
        [0]=>
        string(2) "aa"
        [1]=>
        string(2) "bb"
        [2]=>
        string(2) "cc"
      }
      ["friend"]=>
      array(3) {
        [1]=>
        array(1) {
          [0]=>
          string(4) "none"
        }
        [2]=>
        array(2) {
          [0]=>
          string(3) "sam"
          [1]=>
          string(3) "bob"
        }
        [3]=>
        array(1) {
          [0]=>
          string(5) "aaron"
        }
      }
      ["submit"]=>
      string(4) "send"
    }